@arroyavecommerce/theme-kinetic 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/docs/design/README.md +22 -0
  2. package/docs/design/kinetic-street-concept.html +558 -0
  3. package/package.json +45 -0
  4. package/src/blocks/_shared.tsx +174 -0
  5. package/src/blocks/carrusel.tsx +109 -0
  6. package/src/blocks/category-tiles.test.tsx +59 -0
  7. package/src/blocks/category-tiles.tsx +70 -0
  8. package/src/blocks/editorial-banner.test.tsx +96 -0
  9. package/src/blocks/editorial-banner.tsx +205 -0
  10. package/src/blocks/faq.test.tsx +68 -0
  11. package/src/blocks/faq.tsx +122 -0
  12. package/src/blocks/featured-collection.test.tsx +80 -0
  13. package/src/blocks/featured-collection.tsx +97 -0
  14. package/src/blocks/features.test.tsx +71 -0
  15. package/src/blocks/features.tsx +159 -0
  16. package/src/blocks/hero.test.tsx +75 -0
  17. package/src/blocks/hero.tsx +290 -0
  18. package/src/blocks/index.tsx +35 -0
  19. package/src/blocks/lookbook.test.tsx +80 -0
  20. package/src/blocks/lookbook.tsx +117 -0
  21. package/src/blocks/marquee.test.tsx +54 -0
  22. package/src/blocks/marquee.tsx +114 -0
  23. package/src/blocks/newsletter.test.tsx +60 -0
  24. package/src/blocks/newsletter.tsx +105 -0
  25. package/src/blocks/product-grid.test.tsx +160 -0
  26. package/src/blocks/product-grid.tsx +76 -0
  27. package/src/blocks/promo-countdown.tsx +75 -0
  28. package/src/blocks/promo.test.tsx +71 -0
  29. package/src/blocks/promo.tsx +120 -0
  30. package/src/blocks/rich-text.test.tsx +67 -0
  31. package/src/blocks/rich-text.tsx +75 -0
  32. package/src/blocks/spacer.test.tsx +54 -0
  33. package/src/blocks/spacer.tsx +56 -0
  34. package/src/blocks/testimonials.test.tsx +74 -0
  35. package/src/blocks/testimonials.tsx +104 -0
  36. package/src/blocks/video.test.tsx +159 -0
  37. package/src/blocks/video.tsx +226 -0
  38. package/src/catalog/buy-box.test.tsx +225 -0
  39. package/src/catalog/buy-box.tsx +353 -0
  40. package/src/catalog/config.test.ts +115 -0
  41. package/src/catalog/config.ts +167 -0
  42. package/src/catalog/filter-controls.test.tsx +149 -0
  43. package/src/catalog/filter-controls.tsx +187 -0
  44. package/src/catalog/gallery.test.tsx +201 -0
  45. package/src/catalog/gallery.tsx +212 -0
  46. package/src/catalog/lightbox.test.tsx +95 -0
  47. package/src/catalog/lightbox.tsx +184 -0
  48. package/src/catalog/pdp.test.tsx +309 -0
  49. package/src/catalog/pdp.tsx +354 -0
  50. package/src/catalog/plp-arreglos.test.tsx +235 -0
  51. package/src/catalog/plp-inline.tsx +54 -0
  52. package/src/catalog/plp-overlay.tsx +129 -0
  53. package/src/catalog/plp-parts.test.tsx +146 -0
  54. package/src/catalog/plp-parts.tsx +292 -0
  55. package/src/catalog/plp-pills.tsx +44 -0
  56. package/src/catalog/plp-sidebar.tsx +47 -0
  57. package/src/catalog/plp.test.tsx +319 -0
  58. package/src/catalog/plp.tsx +259 -0
  59. package/src/catalog/product-card.test.tsx +221 -0
  60. package/src/catalog/product-card.tsx +411 -0
  61. package/src/catalog/registry.tsx +16 -0
  62. package/src/catalog/related.test.tsx +52 -0
  63. package/src/catalog/related.tsx +40 -0
  64. package/src/catalog/reviews.test.tsx +56 -0
  65. package/src/catalog/reviews.tsx +116 -0
  66. package/src/catalog/skeletons.test.tsx +61 -0
  67. package/src/catalog/skeletons.tsx +103 -0
  68. package/src/chrome/announcement-bar.test.tsx +86 -0
  69. package/src/chrome/announcement-bar.tsx +173 -0
  70. package/src/chrome/drawer-movil.test.tsx +113 -0
  71. package/src/chrome/drawer-movil.tsx +342 -0
  72. package/src/chrome/footer.test.tsx +133 -0
  73. package/src/chrome/footer.tsx +603 -0
  74. package/src/chrome/header.test.tsx +165 -0
  75. package/src/chrome/header.tsx +592 -0
  76. package/src/chrome/index.ts +26 -0
  77. package/src/chrome/mega-menu.test.tsx +161 -0
  78. package/src/chrome/mega-menu.tsx +317 -0
  79. package/src/chrome/mini-cart.test.tsx +111 -0
  80. package/src/chrome/mini-cart.tsx +320 -0
  81. package/src/content/home.ts +19 -0
  82. package/src/content/seed.test.ts +33 -0
  83. package/src/content/seed.ts +28 -0
  84. package/src/context.ts +104 -0
  85. package/src/icons/icons.test.tsx +118 -0
  86. package/src/icons/index.ts +136 -0
  87. package/src/icons/payment-icons.tsx +241 -0
  88. package/src/icons/social-icons.tsx +108 -0
  89. package/src/icons/svg-base.tsx +68 -0
  90. package/src/index.ts +49 -0
  91. package/src/puck-config.tsx +404 -0
  92. package/src/smoke.test.ts +8 -0
  93. package/src/template.test.tsx +88 -0
  94. package/src/test/mock-ctx.test.tsx +77 -0
  95. package/src/test/mock-ctx.tsx +236 -0
  96. package/src/theme-defaults.test.ts +9 -0
  97. package/src/theme.test.ts +82 -0
  98. package/src/theme.ts +195 -0
  99. package/tsconfig.json +4 -0
package/docs/design/README.md ADDED
@@ -0,0 +1,22 @@
1
+ # Diseño — dirección visual del template-moda
2
+
3
+ ## Kinetic Street (concepto de chrome)
4
+
5
+ `kinetic-street-concept.html` — maqueta interactiva y autocontenida que fija la
6
+ **dirección visual audaz/moderna** del rediseño del chrome (header, buscador y
7
+ footer) y demuestra el principio rector: **100% personalizable desde el CMS con
8
+ varias opciones combinables por componente**.
9
+
10
+ Ábrelo con doble clic (es HTML standalone, sin dependencias) o sírvelo estático.
11
+
12
+ Qué muestra:
13
+ - **Header** nuevo (logo real, nav con hover animado, buscador, mini-cart con conteo).
14
+ - **Buscador — 4 variantes** elegibles (ícono+overlay · barra inline · expandible · command-palette).
15
+ - **Footer + iconos vivos** de pago y redes, con toggles *iconos/texto* y *color de marca / tinta / acento*, y selección de cuáles mostrar.
16
+ - **Sistema**: paleta (hueso · tinta · cobalto · coral), tipografía display pesada y tokens nuevos de tema.
17
+
18
+ Es una **referencia de diseño**, no la tienda final. Sirve como norte para la
19
+ implementación y como material para, más adelante, decidir cómo exponerlo
20
+ (p. ej. galería de estilos dentro del Studio).
21
+
22
+ Spec de la fase: `../../../../docs/superpowers/specs/2026-07-11-template-moda-chrome-redesign-kinetic-design.md`.
package/docs/design/kinetic-street-concept.html ADDED
@@ -0,0 +1,558 @@
1
+ <!doctype html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Kinetic Street — concepto</title>
7
+ <style>html,body{margin:0;padding:0}img{max-width:100%}</style>
8
+ </head>
9
+ <body>
10
+ <title>Kinetic Street — dirección visual del chrome</title>
11
+ <style>
12
+ :root{
13
+ --bg:#F1EEE6; --surface:#FBFAF6; --surface-2:#EDE9DE;
14
+ --fg:#0C0C10; --muted:#6B675E; --line:#DBD6C9;
15
+ --accent:#3B2BFF; --accent-2:#FF3B2E; --on-accent:#FFFFFF;
16
+ --ink-btn:#0C0C10; --on-ink:#FBFAF6;
17
+ --shadow:0 1px 0 rgba(12,12,16,.04), 0 18px 40px -24px rgba(12,12,16,.28);
18
+ --font-display:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
19
+ --font-body:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
20
+ --font-mono:ui-monospace,"SFMono-Regular","IBM Plex Mono",Consolas,monospace;
21
+ --maxw:1180px;
22
+ }
23
+ @media (prefers-color-scheme:dark){
24
+ :root{
25
+ --bg:#0A0A0E; --surface:#141419; --surface-2:#1C1C23;
26
+ --fg:#F4F1E9; --muted:#9A968C; --line:#2A2A33;
27
+ --accent:#6455FF; --accent-2:#FF5A47; --on-accent:#FFFFFF;
28
+ --ink-btn:#F4F1E9; --on-ink:#0A0A0E;
29
+ --shadow:0 1px 0 rgba(0,0,0,.4), 0 22px 50px -26px rgba(0,0,0,.7);
30
+ }
31
+ }
32
+ :root[data-theme="light"]{
33
+ --bg:#F1EEE6; --surface:#FBFAF6; --surface-2:#EDE9DE;
34
+ --fg:#0C0C10; --muted:#6B675E; --line:#DBD6C9;
35
+ --accent:#3B2BFF; --accent-2:#FF3B2E; --on-accent:#FFFFFF;
36
+ --ink-btn:#0C0C10; --on-ink:#FBFAF6;
37
+ --shadow:0 1px 0 rgba(12,12,16,.04), 0 18px 40px -24px rgba(12,12,16,.28);
38
+ }
39
+ :root[data-theme="dark"]{
40
+ --bg:#0A0A0E; --surface:#141419; --surface-2:#1C1C23;
41
+ --fg:#F4F1E9; --muted:#9A968C; --line:#2A2A33;
42
+ --accent:#6455FF; --accent-2:#FF5A47; --on-accent:#FFFFFF;
43
+ --ink-btn:#F4F1E9; --on-ink:#0A0A0E;
44
+ --shadow:0 1px 0 rgba(0,0,0,.4), 0 22px 50px -26px rgba(0,0,0,.7);
45
+ }
46
+
47
+ *{box-sizing:border-box}
48
+ .wrap{background:var(--bg);color:var(--fg);font-family:var(--font-body);line-height:1.55;
49
+ -webkit-font-smoothing:antialiased;overflow-x:hidden}
50
+ .container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
51
+ .mono{font-family:var(--font-mono)}
52
+ .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
53
+ h1,h2,h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
54
+ letter-spacing:-.04em;text-wrap:balance;margin:0;line-height:.92}
55
+ p{margin:0}
56
+ a{color:inherit}
57
+ .display-xl{font-size:clamp(52px,11vw,150px)}
58
+ .display-l{font-size:clamp(34px,5.5vw,68px)}
59
+ .display-m{font-size:clamp(24px,3.2vw,38px)}
60
+
61
+ /* ============ STORE HEADER MOCK (hero thesis) ============ */
62
+ .store{border-bottom:1px solid var(--line);background:var(--surface)}
63
+ .marquee{background:var(--accent-2);color:#fff;overflow:hidden;white-space:nowrap;
64
+ font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
65
+ .marquee__track{display:inline-block;padding:9px 0;animation:slide 26s linear infinite}
66
+ .marquee__track span{padding:0 26px;position:relative}
67
+ .marquee__track span::after{content:"◆";position:absolute;right:-4px;opacity:.55;font-size:8px;top:50%;transform:translateY(-50%)}
68
+ @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
69
+ .hbar{display:flex;align-items:center;gap:26px;padding:20px 24px;max-width:var(--maxw);margin:0 auto}
70
+ .logo{font-family:var(--font-display);font-weight:900;font-size:30px;letter-spacing:-.05em;text-transform:uppercase;line-height:1}
71
+ .logo b{color:var(--accent)}
72
+ .nav{display:flex;gap:22px;align-items:center;flex:1}
73
+ .nav a{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
74
+ text-decoration:none;color:var(--fg);position:relative;padding:4px 0}
75
+ .nav a::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--accent);transition:width .28s cubic-bezier(.2,.7,.2,1)}
76
+ .nav a:hover::after,.nav a:focus-visible::after{width:100%}
77
+ .nav a.sale{color:var(--accent-2)}
78
+ .nav a.sale::after{background:var(--accent-2)}
79
+ .hactions{display:flex;align-items:center;gap:12px}
80
+ .search-pill{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);
81
+ border-radius:999px;padding:9px 16px;color:var(--muted);font-size:13px;min-width:190px;cursor:text;transition:border-color .2s,box-shadow .2s}
82
+ .search-pill:hover{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
83
+ .iconbtn{width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);
84
+ display:grid;place-items:center;cursor:pointer;color:var(--fg);transition:transform .15s, background .2s}
85
+ .iconbtn:hover{transform:translateY(-1px);background:var(--surface)}
86
+ .cart-pill{display:flex;align-items:center;gap:9px;background:var(--ink-btn);color:var(--on-ink);border-radius:999px;
87
+ padding:10px 16px 10px 18px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:0}
88
+ .cart-count{background:var(--accent-2);color:#fff;border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;font-size:11px;padding:0 5px}
89
+ .svgico{width:18px;height:18px;display:block}
90
+
91
+ /* ============ HERO TITLE BAND ============ */
92
+ .hero{padding:64px 0 40px;position:relative}
93
+ .hero .kick{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
94
+ .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
95
+ border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--muted)}
96
+ .tag.accent{border-color:transparent;background:var(--accent);color:#fff}
97
+ .hero h1 span{display:block}
98
+ .hero h1 .out{-webkit-text-stroke:2px var(--fg);color:transparent}
99
+ .hero .lead{max-width:60ch;margin-top:26px;font-size:clamp(16px,1.6vw,19px);color:var(--muted)}
100
+ .hero .lead b{color:var(--fg);font-weight:600}
101
+ .swatches{display:flex;gap:8px;margin-top:30px;flex-wrap:wrap}
102
+ .sw{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
103
+ text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 6px}
104
+ .sw i{width:22px;height:22px;border-radius:50%;display:block;border:1px solid rgba(128,128,128,.25)}
105
+
106
+ /* ============ SECTION SHELL ============ */
107
+ section.block{padding:56px 0;border-top:1px solid var(--line)}
108
+ .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
109
+ .sec-head p.desc{color:var(--muted);max-width:46ch;margin-top:10px;font-size:15px}
110
+ .pill-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
111
+ color:var(--accent);border:1px dashed color-mix(in srgb,var(--accent) 50%,var(--line));border-radius:999px;padding:6px 12px;white-space:nowrap}
112
+
113
+ /* header variant cards */
114
+ .grid{display:grid;gap:16px}
115
+ .grid.c4{grid-template-columns:repeat(4,1fr)}
116
+ .grid.c2{grid-template-columns:repeat(2,1fr)}
117
+ .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
118
+ .card h3{font-size:16px;letter-spacing:-.01em;text-transform:none;font-family:var(--font-body);font-weight:700}
119
+ .card .mini{color:var(--muted);font-size:13.5px;margin-top:8px}
120
+ .card .n{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:.1em}
121
+
122
+ /* ============ SEARCH VARIANTS ============ */
123
+ .search-demo{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
124
+ .frame{background:var(--bg);border:1px solid var(--line);border-radius:12px;min-height:220px;position:relative;overflow:hidden;display:grid;place-items:center;padding:22px}
125
+ .frame .browser-top{position:absolute;top:0;left:0;right:0;height:34px;background:var(--surface-2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px}
126
+ .dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
127
+ .variant-view{display:none;width:100%;max-width:560px;margin-top:20px}
128
+ .variant-view.on{display:block;animation:fade .35s ease}
129
+ @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
130
+ .vbar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:12px 18px;color:var(--muted)}
131
+ .vbar.inline{border-radius:10px}
132
+ .cmdk{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
133
+ .cmdk .top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
134
+ .cmdk .row{display:flex;align-items:center;gap:12px;padding:11px 16px;color:var(--muted);font-size:14px}
135
+ .cmdk .row b{color:var(--fg);font-weight:600}
136
+ .cmdk .row.hot{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--fg)}
137
+ .kbd{margin-left:auto;font-family:var(--font-mono);font-size:10px;border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--muted)}
138
+ .expand-wrap{display:flex;justify-content:flex-end}
139
+ .exp{display:flex;align-items:center;justify-content:flex-end;gap:0;background:var(--surface);border:1px solid var(--line);
140
+ border-radius:999px;height:46px;width:46px;overflow:hidden;transition:width .4s cubic-bezier(.2,.7,.2,1);cursor:pointer}
141
+ .exp.open{width:100%}
142
+ .exp .lbl{white-space:nowrap;opacity:0;transition:opacity .3s;padding-left:16px;color:var(--muted);flex:1}
143
+ .exp.open .lbl{opacity:1}
144
+ .exp .go{width:46px;height:46px;display:grid;place-items:center;flex:none;color:var(--fg)}
145
+ .var-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
146
+ .var-tab{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);
147
+ background:var(--surface);border-radius:999px;padding:9px 15px;cursor:pointer;color:var(--muted);transition:all .18s}
148
+ .var-tab[aria-selected="true"]{background:var(--accent);color:#fff;border-color:transparent}
149
+ .var-tab:hover{color:var(--fg)}
150
+ .var-desc{margin-top:14px;color:var(--muted);font-size:13.5px;min-height:20px}
151
+
152
+ /* ============ FOOTER + ICON CUSTOMIZER ============ */
153
+ .customizer{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
154
+ .ftr{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
155
+ .ftr .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px;padding:30px}
156
+ .ftr .brand .lg{font-family:var(--font-display);font-weight:900;font-size:26px;text-transform:uppercase;letter-spacing:-.04em}
157
+ .ftr .brand .lg b{color:var(--accent)}
158
+ .ftr .brand p{color:var(--muted);font-size:13.5px;margin-top:10px;max-width:26ch}
159
+ .ftr col-h,.ftr .ch{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:12px}
160
+ .ftr .col a{display:block;text-decoration:none;font-size:14px;padding:4px 0;color:var(--fg);opacity:.85}
161
+ .ftr .col a:hover{opacity:1;color:var(--accent)}
162
+ .ftr .bottom{border-top:1px solid var(--line);padding:18px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
163
+ .ftr .legal{font-size:12px;color:var(--muted)}
164
+
165
+ .iconrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
166
+ .payset,.socset{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
167
+ .pay,.soc{height:30px;display:flex;align-items:center;gap:7px;transition:opacity .2s}
168
+ /* payment as tiles */
169
+ .pay .tile{height:30px;min-width:46px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);
170
+ display:flex;align-items:center;justify-content:center;padding:0 8px;overflow:hidden}
171
+ .pay .tile svg{height:16px;display:block}
172
+ .pay .txt,.soc .txt{display:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
173
+ .soc svg{width:20px;height:20px;display:block}
174
+ .soc{color:var(--fg)}
175
+
176
+ /* MODE: text instead of icons */
177
+ .icons--text .tile,.icons--text .soc svg{display:none}
178
+ .icons--text .pay .txt,.icons--text .soc .txt{display:inline;border:1px solid var(--line);border-radius:6px;padding:5px 9px}
179
+
180
+ /* MODE: palette color (monochrome) — override brand fills */
181
+ .icons--palette .pay .tile{background:transparent;border-color:var(--line)}
182
+ .icons--palette .pay .tile svg [data-brand]{fill:var(--fg)!important;stroke:var(--fg)!important}
183
+ .icons--palette .pay .tile svg [data-brand-bg]{fill:transparent!important}
184
+ .icons--palette .soc svg [data-brand]{fill:currentColor!important}
185
+ .icons--palette .soc{color:var(--fg)}
186
+ /* MODE: accent palette */
187
+ .icons--accent .pay .tile svg [data-brand]{fill:var(--accent)!important;stroke:var(--accent)!important}
188
+ .icons--accent .soc svg [data-brand]{fill:var(--accent)!important}
189
+ .icons--accent .soc{color:var(--accent)}
190
+
191
+ .panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);position:sticky;top:16px}
192
+ .panel h3{font-family:var(--font-body);text-transform:none;font-weight:700;font-size:14px;letter-spacing:-.01em;margin-bottom:4px}
193
+ .panel .grp{padding:14px 0;border-bottom:1px solid var(--line)}
194
+ .panel .grp:last-child{border-bottom:0;padding-bottom:0}
195
+ .panel .glabel{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
196
+ .seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px}
197
+ .seg button{flex:1;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:600;padding:7px 8px;border-radius:6px;cursor:pointer;transition:all .15s}
198
+ .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
199
+ .chips{display:flex;flex-wrap:wrap;gap:7px}
200
+ .chk{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-size:12px;cursor:pointer;user-select:none;background:var(--surface)}
201
+ .chk input{accent-color:var(--accent);width:14px;height:14px;margin:0}
202
+ .chk[data-off="1"]{opacity:.45}
203
+
204
+ /* ============ SYSTEM / TOKENS ============ */
205
+ .tok{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
206
+ .tokc{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
207
+ .tokc .chip{height:76px}
208
+ .tokc .meta{padding:10px 12px}
209
+ .tokc .meta b{font-size:13px}
210
+ .tokc .meta span{display:block;font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:2px}
211
+ .type-rows>div{border-top:1px solid var(--line);padding:16px 0;display:flex;align-items:baseline;gap:18px}
212
+ .type-rows>div:first-child{border-top:0}
213
+ .type-rows .role{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);width:120px;flex:none}
214
+ .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
215
+ .prin{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--surface)}
216
+ .prin .num{font-family:var(--font-display);font-weight:900;font-size:30px;color:var(--accent);line-height:1}
217
+ .prin h3{font-family:var(--font-body);text-transform:none;font-weight:700;font-size:15px;margin:10px 0 6px;letter-spacing:-.01em}
218
+ .prin p{color:var(--muted);font-size:13.5px}
219
+
220
+ footer.end{border-top:1px solid var(--line);padding:36px 0 56px;color:var(--muted);font-size:13px}
221
+ .theme-toggle{position:fixed;right:16px;bottom:16px;z-index:50;background:var(--ink-btn);color:var(--on-ink);border:0;
222
+ border-radius:999px;padding:11px 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:var(--shadow)}
223
+
224
+ @media (max-width:920px){
225
+ .grid.c4{grid-template-columns:repeat(2,1fr)}
226
+ .customizer{grid-template-columns:1fr}
227
+ .panel{position:static}
228
+ .ftr .top{grid-template-columns:1fr;gap:20px}
229
+ .tok{grid-template-columns:repeat(2,1fr)}
230
+ .principles{grid-template-columns:1fr}
231
+ .nav{display:none}
232
+ }
233
+ @media (max-width:560px){
234
+ .hactions .search-pill{display:none}
235
+ .type-rows>div{flex-direction:column;gap:6px}
236
+ }
237
+ @media (prefers-reduced-motion:reduce){
238
+ *{animation-duration:.001ms!important;transition-duration:.001ms!important}
239
+ }
240
+ </style>
241
+
242
+ <div class="wrap">
243
+
244
+ <!-- ============ HERO: the new store header, live ============ -->
245
+ <div class="store" role="img" aria-label="Vista previa del nuevo encabezado de la tienda">
246
+ <div class="marquee" aria-hidden="true">
247
+ <div class="marquee__track">
248
+ <span>Envío gratis desde $150.000</span><span>Nuevo drop — Otoño 2026</span>
249
+ <span>Paga con PSE · Nequi · Tarjeta</span><span>Cambios fáciles en 30 días</span>
250
+ <span>Envío gratis desde $150.000</span><span>Nuevo drop — Otoño 2026</span>
251
+ <span>Paga con PSE · Nequi · Tarjeta</span><span>Cambios fáciles en 30 días</span>
252
+ </div>
253
+ </div>
254
+ <div class="hbar">
255
+ <div class="logo">MO<b>DA</b>°</div>
256
+ <nav class="nav" aria-label="Menú principal (demo)">
257
+ <a href="#nuevo">Nuevo</a><a href="#mujer">Mujer</a><a href="#hombre">Hombre</a>
258
+ <a href="#acc">Accesorios</a><a href="#sale" class="sale">Sale</a>
259
+ </nav>
260
+ <div class="hactions">
261
+ <div class="search-pill" tabindex="0"><svg class="svgico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>Buscar prendas…</div>
262
+ <button class="iconbtn" aria-label="Cuenta"><svg class="svgico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg></button>
263
+ <button class="cart-pill">Bolsa <span class="cart-count">2</span></button>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="container hero">
269
+ <div class="kick">
270
+ <span class="tag accent">Rediseño · Dirección visual</span>
271
+ <span class="tag">Chrome: header · buscador · footer</span>
272
+ <span class="tag">Todo editable en el Studio</span>
273
+ </div>
274
+ <h1 class="display-xl"><span>Kinetic</span><span class="out">Street</span></h1>
275
+ <p class="lead">Una dirección <b>más audaz y moderna</b> para la tienda: tipografía grotesca pesada, un
276
+ cobalto eléctrico como acento, coral para la energía, movimiento con intención y superficies con profundidad.
277
+ Cada pieza de aquí — variantes de header, estilos de buscador, iconos de pago y redes — está pensada para ser
278
+ <b>elegible y personalizable desde el CMS</b>, sin tocar código.</p>
279
+ <div class="swatches" aria-label="Paleta">
280
+ <span class="sw"><i style="background:#3B2BFF"></i>Cobalto · acento</span>
281
+ <span class="sw"><i style="background:#FF3B2E"></i>Coral · energía</span>
282
+ <span class="sw"><i style="background:#0C0C10"></i>Tinta</span>
283
+ <span class="sw"><i style="background:#F1EEE6"></i>Hueso</span>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- ============ HEADER BEHAVIOUR / VARIANTS ============ -->
288
+ <section class="block"><div class="container">
289
+ <div class="sec-head">
290
+ <div>
291
+ <span class="eyebrow">Header · variantes</span>
292
+ <h2 class="display-m" style="margin-top:12px">El encabezado, configurable</h2>
293
+ <p class="desc">Hoy el header sale vacío (sin logo ni menú). El rediseño lo vuelve una pieza con variantes
294
+ reales y props editables por variante — mismo mecanismo que ya usan las variantes de PLP.</p>
295
+ </div>
296
+ <span class="pill-note">Elegible en /studio/chrome</span>
297
+ </div>
298
+ <div class="grid c4">
299
+ <div class="card"><div class="n">01</div><h3>Sticky que encoge</h3><p class="mini">Al bajar, la barra se compacta y gana blur + sombra. El logo reduce. Fijo · hide-on-scroll · shrink.</p></div>
300
+ <div class="card"><div class="n">02</div><h3>Mega-menú con imagen</h3><p class="mini">Columnas de enlaces + celda destacada con foto de campaña, "ver todo" y apertura animada.</p></div>
301
+ <div class="card"><div class="n">03</div><h3>Transparente sobre hero</h3><p class="mini">Header montado sobre el hero a pantalla completa; se vuelve sólido al hacer scroll.</p></div>
302
+ <div class="card"><div class="n">04</div><h3>Utility bar</h3><p class="mini">Doble fila: utilidades (idioma / moneda / ayuda) arriba, navegación principal abajo.</p></div>
303
+ </div>
304
+ <div class="grid c4" style="margin-top:16px">
305
+ <div class="card"><div class="n">Prop</div><h3>Logo: texto o imagen</h3><p class="mini">Wordmark tipográfico o subir imagen, con control de tamaño. Adiós al logo invisible.</p></div>
306
+ <div class="card"><div class="n">Prop</div><h3>Mini-cart drawer</h3><p class="mini">La bolsa abre un panel lateral con conteo y productos, en vez de un botón muerto.</p></div>
307
+ <div class="card"><div class="n">Prop</div><h3>Acciones visibles</h3><p class="mini">Mostrar/ocultar cuenta, favoritos y carrito; enlaces reales a cada destino.</p></div>
308
+ <div class="card"><div class="n">Prop</div><h3>Anuncio kinético</h3><p class="mini">Marquesina o barra estática, velocidad y color configurables, opción de cerrar.</p></div>
309
+ </div>
310
+ </div></section>
311
+
312
+ <!-- ============ SEARCH VARIANTS (interactive) ============ -->
313
+ <section class="block"><div class="container">
314
+ <div class="sec-head">
315
+ <div>
316
+ <span class="eyebrow">Buscador · 4 variantes</span>
317
+ <h2 class="display-m" style="margin-top:12px">Un buscador con estilo elegible</h2>
318
+ <p class="desc">Hoy es un overlay decorativo que no busca nada. Lo volvemos funcional y con variantes
319
+ seleccionables desde el Studio — igual que elegís el layout de filtros del PLP.</p>
320
+ </div>
321
+ <span class="pill-note">Elegible en /studio/chrome</span>
322
+ </div>
323
+
324
+ <div class="search-demo">
325
+ <div class="frame">
326
+ <div class="browser-top"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
327
+
328
+ <div class="variant-view on" data-v="overlay">
329
+ <div style="text-align:center;color:var(--muted);font-size:13px;margin-bottom:14px" class="mono">Toca el ícono ⌕ y se abre un overlay a pantalla completa</div>
330
+ <div class="vbar" style="max-width:420px;margin:0 auto"><svg class="svgico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>Buscar prendas, colecciones, tallas…</div>
331
+ </div>
332
+
333
+ <div class="variant-view" data-v="inline">
334
+ <div class="vbar inline"><svg class="svgico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>Buscar en la tienda
335
+ <span style="margin-left:auto;background:var(--accent);color:#fff;border-radius:7px;padding:6px 12px;font-size:12px;font-weight:700">Buscar</span></div>
336
+ </div>
337
+
338
+ <div class="variant-view" data-v="expand">
339
+ <div class="expand-wrap"><div class="exp" id="expDemo"><span class="lbl mono">Escribí y presioná enter…</span><span class="go"><svg class="svgico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg></span></div></div>
340
+ <div style="text-align:center;color:var(--muted);font-size:12px;margin-top:12px" class="mono">(tocá el ícono para expandir la barra)</div>
341
+ </div>
342
+
343
+ <div class="variant-view" data-v="cmdk">
344
+ <div class="cmdk">
345
+ <div class="top"><svg class="svgico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg><span style="color:var(--muted)">buzo…</span><span class="kbd">ESC</span></div>
346
+ <div class="row hot"><span>Buzo Heavy Vintage</span><b style="margin-left:auto">$179.900</b></div>
347
+ <div class="row"><span>Buzo oversize crema</span><b style="margin-left:auto">$149.900</b></div>
348
+ <div class="row" style="border-top:1px solid var(--line)"><span class="mono" style="font-size:11px;letter-spacing:.1em">EN COLECCIONES</span><span class="kbd">↵</span></div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+
353
+ <div class="var-tabs" role="tablist">
354
+ <button class="var-tab" role="tab" aria-selected="true" data-t="overlay">Ícono + overlay</button>
355
+ <button class="var-tab" role="tab" aria-selected="false" data-t="inline">Barra inline</button>
356
+ <button class="var-tab" role="tab" aria-selected="false" data-t="expand">Expandible</button>
357
+ <button class="var-tab" role="tab" aria-selected="false" data-t="cmdk">Command-palette + sugerencias</button>
358
+ </div>
359
+ <p class="var-desc" id="varDesc">El actual, pero conectado: un ícono que abre una búsqueda a pantalla completa. Ideal para diseños minimalistas.</p>
360
+ </div>
361
+ </div></section>
362
+
363
+ <!-- ============ FOOTER + ICON CUSTOMIZER (the payoff) ============ -->
364
+ <section class="block"><div class="container">
365
+ <div class="sec-head">
366
+ <div>
367
+ <span class="eyebrow">Footer · iconos vivos</span>
368
+ <h2 class="display-m" style="margin-top:12px">Pagos y redes, con vida</h2>
369
+ <p class="desc">Hoy los medios de pago y las redes son texto plano (“VISA MASTERCARD… INSTAGRAM…”).
370
+ Los volvemos iconos reales, y vos decidís: qué métodos mostrar, iconos o texto, y colores de marca
371
+ o de tu paleta. Probalo acá 👇</p>
372
+ </div>
373
+ <span class="pill-note">Editable en /studio/chrome</span>
374
+ </div>
375
+
376
+ <div class="customizer">
377
+ <!-- FOOTER PREVIEW -->
378
+ <div class="ftr icons--brand" id="footerPreview">
379
+ <div class="top">
380
+ <div class="brand">
381
+ <div class="lg">MO<b>DA</b>°</div>
382
+ <p>Moda urbana del día a día. Envíos a toda Colombia.</p>
383
+ </div>
384
+ <div class="col"><span class="ch">Tienda</span><a href="#">Novedades</a><a href="#">Ropa</a><a href="#">Accesorios</a><a href="#">Sale</a></div>
385
+ <div class="col"><span class="ch">Ayuda</span><a href="#">Envíos y devoluciones</a><a href="#">Guía de tallas</a><a href="#">Rastrear pedido</a><a href="#">Contacto</a></div>
386
+ </div>
387
+ <div class="bottom">
388
+ <div class="iconrow socset" id="socRow"></div>
389
+ <div class="iconrow payset" id="payRow"></div>
390
+ </div>
391
+ <div class="bottom" style="padding-top:0;border-top:0"><span class="legal">© 2026 Moda. Todos los derechos reservados.</span></div>
392
+ </div>
393
+
394
+ <!-- CONTROL PANEL -->
395
+ <div class="panel">
396
+ <h3>Personalizá los iconos</h3>
397
+ <p style="color:var(--muted);font-size:12.5px;margin-bottom:6px">Así se vería el editor en el Studio.</p>
398
+
399
+ <div class="grp">
400
+ <div class="glabel">Mostrar como</div>
401
+ <div class="seg" id="segMode"><button aria-pressed="true" data-mode="icon">Iconos</button><button aria-pressed="false" data-mode="text">Texto</button></div>
402
+ </div>
403
+ <div class="grp">
404
+ <div class="glabel">Color de los iconos</div>
405
+ <div class="seg" id="segColor">
406
+ <button aria-pressed="true" data-color="brand">Marca</button>
407
+ <button aria-pressed="false" data-color="palette">Tinta</button>
408
+ <button aria-pressed="false" data-color="accent">Acento</button>
409
+ </div>
410
+ </div>
411
+ <div class="grp">
412
+ <div class="glabel">Medios de pago</div>
413
+ <div class="chips" id="payChips"></div>
414
+ </div>
415
+ <div class="grp">
416
+ <div class="glabel">Redes sociales</div>
417
+ <div class="chips" id="socChips"></div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </div></section>
422
+
423
+ <!-- ============ SYSTEM / TOKENS ============ -->
424
+ <section class="block"><div class="container">
425
+ <div class="sec-head">
426
+ <div><span class="eyebrow">Sistema</span>
427
+ <h2 class="display-m" style="margin-top:12px">La base del rediseño</h2>
428
+ <p class="desc">Tokens nuevos de tema (colores de acento y estado, sombras, radios, espaciado) que faltan hoy
429
+ y que hacen posible este salto — todos editables desde /studio/tema.</p>
430
+ </div>
431
+ </div>
432
+
433
+ <div class="tok">
434
+ <div class="tokc"><div class="chip" style="background:#3B2BFF"></div><div class="meta"><b>Acento</b><span>--cms-acento</span></div></div>
435
+ <div class="tokc"><div class="chip" style="background:#FF3B2E"></div><div class="meta"><b>Energía</b><span>--cms-acento-2</span></div></div>
436
+ <div class="tokc"><div class="chip" style="background:#0C0C10"></div><div class="meta"><b>Tinta</b><span>--cms-texto</span></div></div>
437
+ <div class="tokc"><div class="chip" style="background:#F1EEE6"></div><div class="meta"><b>Hueso</b><span>--cms-fondo</span></div></div>
438
+ <div class="tokc"><div class="chip" style="background:linear-gradient(120deg,#3B2BFF,#FF3B2E)"></div><div class="meta"><b>Gradiente</b><span>--cms-degradado</span></div></div>
439
+ </div>
440
+
441
+ <div class="type-rows" style="margin-top:34px">
442
+ <div><span class="role">Display</span><span style="font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(28px,4vw,46px)">Grotesca pesada</span></div>
443
+ <div><span class="role">Cuerpo</span><span style="font-size:18px">Texto legible, humanista, para descripciones y datos de producto.</span></div>
444
+ <div><span class="role">Mono · dato</span><span class="mono" style="font-size:15px;letter-spacing:.04em">$179.900 · TALLA M · SKU-0042</span></div>
445
+ </div>
446
+
447
+ <div class="principles">
448
+ <div class="prin"><div class="num">◆</div><h3>Audaz con foco</h3><p>Un acento fuerte (cobalto) y un golpe de energía (coral) sobre neutrales cálidos. La tipografía manda.</p></div>
449
+ <div class="prin"><div class="num">↗</div><h3>Movimiento con intención</h3><p>Marquesina, hover de nav, buscador que se expande, mini-cart que entra. Nunca por decorar.</p></div>
450
+ <div class="prin"><div class="num">⚙</div><h3>Todo editable</h3><p>Cada variante, color e icono se elige en el Studio. El template crece sin tocar código.</p></div>
451
+ </div>
452
+ </div></section>
453
+
454
+ <footer class="end"><div class="container">
455
+ Concepto de dirección visual · <b style="color:var(--fg)">Kinetic Street</b> para template-moda.
456
+ Es una maqueta para alinear el rumbo — no es la tienda final. Elegí, ajustá o pedí otra variante.
457
+ </div></footer>
458
+
459
+ <button class="theme-toggle" id="themeBtn" aria-label="Cambiar tema">◑ Tema</button>
460
+ </div>
461
+
462
+ <script>
463
+ (function(){
464
+ "use strict";
465
+ // ---- theme toggle (demo) ----
466
+ var root=document.documentElement;
467
+ document.getElementById("themeBtn").addEventListener("click",function(){
468
+ var cur=root.getAttribute("data-theme");
469
+ if(!cur){cur=matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light";}
470
+ root.setAttribute("data-theme",cur==="dark"?"light":"dark");
471
+ });
472
+
473
+ // ---- search variant tabs ----
474
+ var descs={
475
+ overlay:"El actual, pero conectado: un ícono que abre una búsqueda a pantalla completa. Ideal para diseños minimalistas.",
476
+ inline:"Barra siempre visible en el header, estilo marketplace. Máxima visibilidad de la búsqueda.",
477
+ expand:"Un ícono que se expande a barra dentro del header al hacer clic. Limpio y moderno.",
478
+ cmdk:"Modal centrado con sugerencias de productos en vivo y atajos de teclado (⌘K). El más avanzado."
479
+ };
480
+ var tabs=document.querySelectorAll(".var-tab"), views=document.querySelectorAll(".variant-view"), vd=document.getElementById("varDesc");
481
+ tabs.forEach(function(t){t.addEventListener("click",function(){
482
+ tabs.forEach(function(x){x.setAttribute("aria-selected","false");});
483
+ t.setAttribute("aria-selected","true");
484
+ var v=t.getAttribute("data-t");
485
+ views.forEach(function(x){x.classList.toggle("on",x.getAttribute("data-v")===v);});
486
+ vd.textContent=descs[v];
487
+ });});
488
+ var expDemo=document.getElementById("expDemo");
489
+ if(expDemo)expDemo.addEventListener("click",function(){expDemo.classList.toggle("open");});
490
+
491
+ // ---- ICONS data (simplified, recognizable brand marks) ----
492
+ var PAY={
493
+ visa:{label:"Visa",svg:'<svg viewBox="0 0 48 16"><text data-brand x="0" y="13" font-family="Arial" font-weight="800" font-style="italic" font-size="14" fill="#1A1F71">VISA</text></svg>'},
494
+ mastercard:{label:"Mastercard",svg:'<svg viewBox="0 0 40 24"><circle data-brand cx="15" cy="12" r="9" fill="#EB001B"/><circle data-brand cx="25" cy="12" r="9" fill="#F79E1B" opacity="0.9"/></svg>'},
495
+ amex:{label:"Amex",svg:'<svg viewBox="0 0 48 16"><rect data-brand-bg width="48" height="16" rx="2" fill="#2E77BC"/><text data-brand x="24" y="12" text-anchor="middle" font-family="Arial" font-weight="800" font-size="9" fill="#fff">AMEX</text></svg>'},
496
+ pse:{label:"PSE",svg:'<svg viewBox="0 0 40 16"><text data-brand x="0" y="13" font-family="Arial" font-weight="800" font-size="13" fill="#0A3D91">pse</text><circle data-brand cx="34" cy="5" r="3" fill="#00A94F"/></svg>'},
497
+ nequi:{label:"Nequi",svg:'<svg viewBox="0 0 52 16"><text data-brand x="0" y="13" font-family="Arial" font-weight="800" font-size="12" fill="#DA0081">Nequi</text></svg>'},
498
+ efecty:{label:"Efecty",svg:'<svg viewBox="0 0 52 16"><text data-brand x="0" y="13" font-family="Arial" font-weight="800" font-size="12" fill="#F6A800">Efecty</text></svg>'}
499
+ };
500
+ var SOC={
501
+ instagram:{label:"Instagram",svg:'<svg viewBox="0 0 24 24"><rect data-brand x="3" y="3" width="18" height="18" rx="5" fill="none" stroke="#E1306C" stroke-width="2"/><circle data-brand cx="12" cy="12" r="4" fill="none" stroke="#E1306C" stroke-width="2"/><circle data-brand cx="17.2" cy="6.8" r="1.3" fill="#E1306C"/></svg>'},
502
+ tiktok:{label:"TikTok",svg:'<svg viewBox="0 0 24 24"><path data-brand d="M14 4c.3 2.3 1.8 3.9 4 4.2v2.5c-1.5 0-2.9-.5-4-1.3v5.4a5 5 0 1 1-5-5c.3 0 .6 0 .9.1v2.6a2.4 2.4 0 1 0 1.6 2.3V4H14z" fill="#111"/></svg>'},
503
+ whatsapp:{label:"WhatsApp",svg:'<svg viewBox="0 0 24 24"><path data-brand d="M12 3a9 9 0 0 0-7.7 13.6L3 21l4.5-1.2A9 9 0 1 0 12 3zm0 2a7 7 0 0 1 5.9 10.7l-.3.5.7 2.5-2.6-.7-.5.3A7 7 0 1 1 12 5zm-2.7 3.4c-.2 0-.5.1-.7.4-.3.3-.9.9-.9 2.1s.9 2.4 1 2.6c.1.2 1.7 2.7 4.2 3.6 2 .8 2.4.6 2.9.6.5 0 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1l-.7-.4c-.3-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1l-.7.9c-.1.2-.3.2-.5.1-.7-.3-1.4-.6-2.1-1.5-.4-.5-.1-.5.2-1 .1-.2 0-.3 0-.5l-.8-1.9c-.2-.4-.4-.3-.5-.3h-.5z" fill="#25D366"/></svg>'},
504
+ x:{label:"X",svg:'<svg viewBox="0 0 24 24"><path data-brand d="M17.5 4h2.6l-5.7 6.5L21 20h-4.9l-3.8-5-4.4 5H4.3l6.1-7L4 4h5l3.5 4.6L17.5 4zm-1.7 14.4h1.4L8.3 5.5H6.8l9 12.9z" fill="#111"/></svg>'},
505
+ youtube:{label:"YouTube",svg:'<svg viewBox="0 0 24 24"><rect data-brand x="2.5" y="6" width="19" height="12" rx="3.5" fill="#FF0000"/><path data-brand-bg d="M10 9.2v5.6l5-2.8z" fill="#fff"/></svg>'},
506
+ facebook:{label:"Facebook",svg:'<svg viewBox="0 0 24 24"><path data-brand d="M13.5 21v-7h2.4l.4-2.9h-2.8V9.3c0-.8.2-1.4 1.4-1.4h1.5V5.3c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.8v2.1H8.2V14h2.3v7h3z" fill="#1877F2"/></svg>'}
507
+ };
508
+ var payOrder=["visa","mastercard","amex","pse","nequi","efecty"];
509
+ var socOrder=["instagram","tiktok","whatsapp","x","youtube","facebook"];
510
+ var payOn={visa:1,mastercard:1,amex:1,pse:1,nequi:1,efecty:0};
511
+ var socOn={instagram:1,tiktok:1,whatsapp:1,x:0,youtube:0,facebook:1};
512
+
513
+ var payRow=document.getElementById("payRow"), socRow=document.getElementById("socRow");
514
+ var payChips=document.getElementById("payChips"), socChips=document.getElementById("socChips");
515
+
516
+ function renderRows(){
517
+ payRow.innerHTML=payOrder.filter(function(k){return payOn[k];}).map(function(k){
518
+ return '<span class="pay"><span class="tile">'+PAY[k].svg+'</span><span class="txt">'+PAY[k].label+'</span></span>';
519
+ }).join("");
520
+ socRow.innerHTML=socOrder.filter(function(k){return socOn[k];}).map(function(k){
521
+ return '<span class="soc">'+SOC[k].svg+'<span class="txt">'+SOC[k].label+'</span></span>';
522
+ }).join("");
523
+ }
524
+ function chip(k,label,on,group){
525
+ return '<label class="chk" data-off="'+(on?0:1)+'"><input type="checkbox" '+(on?"checked":"")+' data-g="'+group+'" data-k="'+k+'">'+label+'</label>';
526
+ }
527
+ function renderChips(){
528
+ payChips.innerHTML=payOrder.map(function(k){return chip(k,PAY[k].label,payOn[k],"pay");}).join("");
529
+ socChips.innerHTML=socOrder.map(function(k){return chip(k,SOC[k].label,socOn[k],"soc");}).join("");
530
+ }
531
+ document.addEventListener("change",function(e){
532
+ var i=e.target;if(i.tagName!=="INPUT"||!i.dataset.g)return;
533
+ var set=i.dataset.g==="pay"?payOn:socOn; set[i.dataset.k]=i.checked?1:0;
534
+ i.closest(".chk").setAttribute("data-off",i.checked?0:1);
535
+ renderRows();
536
+ });
537
+
538
+ // segmented controls -> footer classes
539
+ var fp=document.getElementById("footerPreview");
540
+ function setSeg(id,attr,fn){
541
+ document.getElementById(id).addEventListener("click",function(e){
542
+ var b=e.target.closest("button");if(!b)return;
543
+ this.querySelectorAll("button").forEach(function(x){x.setAttribute("aria-pressed","false");});
544
+ b.setAttribute("aria-pressed","true"); fn(b.dataset[attr]);
545
+ });
546
+ }
547
+ setSeg("segMode","mode",function(v){ fp.classList.toggle("icons--text",v==="text"); });
548
+ setSeg("segColor","color",function(v){
549
+ fp.classList.remove("icons--brand","icons--palette","icons--accent");
550
+ fp.classList.add("icons--"+v);
551
+ });
552
+
553
+ renderChips(); renderRows();
554
+ })();
555
+ </script>
556
+
557
+ </body>
558
+ </html>
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@arroyavecommerce/theme-kinetic",
3
+ "version": "0.2.0",
4
+ "description": "Kinetic — tema de moda para ArroyaveCommerce (Medusa v2 + Next 15).",
5
+ "keywords": [
6
+ "arroyavecommerce",
7
+ "medusa",
8
+ "nextjs",
9
+ "cms",
10
+ "theme",
11
+ "fashion",
12
+ "moda",
13
+ "ecommerce",
14
+ "kinetic"
15
+ ],
16
+ "license": "MIT",
17
+ "type": "module",
18
+ "main": "./src/index.ts",
19
+ "types": "./src/index.ts",
20
+ "exports": {
21
+ ".": "./src/index.ts",
22
+ "./seed": "./src/content/seed.ts",
23
+ "./package.json": "./package.json"
24
+ },
25
+ "peerDependencies": {
26
+ "@arroyavecommerce/cms-core": ">=0.1.0",
27
+ "@arroyavecommerce/cms-storefront": ">=0.1.0",
28
+ "@arroyavecommerce/cms-studio": ">=0.1.0",
29
+ "@medusajs/types": ">=2.15.0",
30
+ "@puckeditor/core": ">=0.22",
31
+ "react": ">=19",
32
+ "react-dom": ">=19",
33
+ "zod": ">=4.0"
34
+ },
35
+ "devDependencies": {
36
+ "@arroyavecommerce/cms-core": "0.2.0",
37
+ "@arroyavecommerce/cms-storefront": "0.2.0",
38
+ "@arroyavecommerce/cms-studio": "0.2.0",
39
+ "@medusajs/types": "^2.15.0",
40
+ "@puckeditor/core": "^0.22.0",
41
+ "react": "^19.0.0",
42
+ "react-dom": "^19.0.0",
43
+ "zod": "^4.0.0"
44
+ }
45
+ }