PageSourceSearch

https://www.decocms.com/assets/rihappy-C565tGK1.js

js decocms.com collected 2026-09-25 22:01:51 UTC 108,387 bytes, 1,463 lines download raw bytes

1import{d as N,j as C}from"./vendor-react-CHlj1UOJ.js";import{D as X}from"./DeckPasswordGate-DiamogjW.js";import{d as W,D as Q}from"./deckCss-BVSK-U50.js";import{M as K}from"./motifs-BcOvyIEi.js";const e={bg:"#121110",card:"#282524",border:"#282524",borderSt:"#44403C",text:"#F1F0EE",textHi:"#fafaf9",textDim:"#A6A09D",textMute:"#78726E",lime:"#D0EC1A",limeDark:"#07401A",purple:"#A595FF",lbg:"#fafaf9",lborder:"#e5e3df",ltext:"#07401a",laccent:"#8caa25",lbody:"#6b6962",lmute:"#9a9890",amber:"#d97a14"},u=["#4EC9E8","#A595FF","#FFC116","#D0EC1A"],A="https://decoims.com/decocms/7a1c4c73-2274-4129-84f6-c4bb0a5ebcab/deco-logo.svg",s="@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=JetBrains+Mono:wght@400;500&display=swap');",B=`
2  * { margin:0; padding:0; box-sizing:border-box; }
3  body {
4    font-family:'Inter',-apple-system,system-ui,sans-serif;
5    width:100vw; height:100vh; overflow:hidden;
6    background:${e.bg}; color:${e.text};
7    -webkit-font-smoothing:antialiased;
8  }
9  ::selection { background:${e.lime}; color:${e.limeDark}; }
10`,l=`
11  * { margin:0; padding:0; box-sizing:border-box; }
12  body {
13    font-family:'Inter',-apple-system,system-ui,sans-serif;
14    width:100vw; height:100vh; overflow:hidden;
15    background:${e.lbg}; color:${e.ltext};
16    -webkit-font-smoothing:antialiased;
17  }
18  ::selection { background:${e.laccent}; color:#fff; }
19`,n=`
20  @keyframes fadeUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
21  @keyframes fadeDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
22  @keyframes fadeIn   { from{opacity:0} to{opacity:1} }
23  @keyframes cardUp   { to{opacity:1;transform:translateY(0)} }
24  @keyframes numPop   { 0%{opacity:0;transform:scale(.7) translateY(6px)} 65%{opacity:1;transform:scale(1.06) translateY(0)} 100%{opacity:1;transform:scale(1) translateY(0)} }
25`,d=`
26  .eyebrow { font-family:'JetBrains Mono',monospace; font-size:13px;
27    letter-spacing:.22em; text-transform:uppercase; color:${e.laccent};
28    margin-bottom:26px; opacity:0; animation:fadeDown .6s ease forwards .1s; }
29`,r=(a,o)=>`
30  body::before { content:""; position:absolute; width:680px; height:680px; border-radius:50%;
31    background:${a}; filter:blur(280px); opacity:0.06; ${o} pointer-events:none; }
32`,D=(a,o,t,i,p)=>`<svg class="tile" style="left:${o}px;top:${t}px;color:${i};animation-delay:${p.toFixed(2)}s" viewBox="0 0 120 120" fill="currentColor"><path d="${K[a]}" fill-rule="evenodd" clip-rule="evenodd"/></svg>`,P=`
33  .tile { position:absolute; display:block; width:100px; height:100px; z-index:0;
34    opacity:0; animation:fadeIn .9s ease forwards; pointer-events:none; }
35`,c='<link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..400,0,0" rel="stylesheet">',F=`
36  .ms { font-family:'Material Symbols Sharp'; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 40; line-height:1; }
37`,m=F,$=["quatroPontas","tacoChines","arabela","flor"],Z=[1520,1620,1720,1820].flatMap((a,o)=>Array.from({length:12},(t,i)=>D($[(o*3+i)%$.length],a,-40+i*100,u[(o+i)%u.length],.25+o*.05+i*.03))).join(""),ee=`<!DOCTYPE html><html><head><style>
38${s}
39${l}
40${n}
41${P}
42body { position:relative; background:#f9f6f2; }
43.toprow { position:absolute; left:86px; right:520px; top:64px; display:flex; justify-content:space-between;
44  font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:${e.laccent};
45  opacity:0; animation:fadeDown .7s ease forwards .15s; }
46.headline { position:absolute; left:86px; top:158px; width:1400px;
47  font-family:'Inter',sans-serif; font-weight:400;
48  font-size:clamp(52px,5.4vw,92px); line-height:1.06; letter-spacing:-.04em; color:${e.ltext};
49  opacity:0; animation:fadeUp .9s ease forwards .3s; }
50.headline .accent { color:${e.laccent}; }
51.sub { position:absolute; left:86px; top:600px; width:1180px;
52  font-family:'Inter',sans-serif; font-weight:400;
53  font-size:32px; line-height:1.3; letter-spacing:-.02em; color:#5d5751;
54  opacity:0; animation:fadeUp .8s ease forwards .6s; }
55.chips { position:absolute; left:86px; top:770px; display:flex; gap:14px;
56  opacity:0; animation:fadeUp .8s ease forwards .75s; }
57.chip { border:1px solid ${e.lborder}; background:#fff; border-radius:999px; padding:12px 24px;
58  font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.08em; text-transform:uppercase;
59  color:${e.ltext}; }
60.chip b { color:${e.laccent}; font-weight:500; }
61.deco-logo { position:absolute; left:82px; bottom:72px; width:230px; height:auto;
62  opacity:0; animation:fadeUp .8s ease forwards .85s; }
63.meta { position:absolute; left:360px; bottom:80px;
64  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
65  line-height:1.8; color:${e.lmute};
66  opacity:0; animation:fadeUp .8s ease forwards .95s; }
67</style></head><body>
68  ${Z}
69  <div class="toprow"><span>Proposta comercial</span><span>Setembro 2026</span></div>
70  <h1 class="headline">Proposta<br>Ri Happy <span class="accent">&lt;&gt; deco</span></h1>
71  <p class="sub">As 11 customizações da loja já mapeadas, as três semanas até o go-live dia por dia, e a operação depois dele.</p>
72  <div class="chips">
73    <span class="chip">a <b>migração</b></span>
74    <span class="chip">a <b>implementação</b></span>
75    <span class="chip">depois do <b>go-live</b></span>
76  </div>
77  <img class="deco-logo" src="${A}" alt="deco">
78  <div class="meta">Para Thiago del Giudice Machado<br>e o time digital da Ri Happy</div>
79</body></html>`,M=(a,o,t,i)=>`
80  <div class="card" style="animation-delay:${i}s">
81    <div class="card-top">
82      <div class="card-num">${a}</div>
83      <div class="card-name">${o}</div>
84    </div>
85    <ul>${t.map((p,f)=>`<li style="animation-delay:${(i+.35+f*.1).toFixed(2)}s">${p}</li>`).join("")}</ul>
86  </div>`,ae=`<!DOCTYPE html><html><head><style>
87${s}
88${B}
89${n}
90body { background:#1c1917; padding:64px 76px 64px; display:flex; flex-direction:column; overflow:hidden; }
91.headline { font-family:'Inter',sans-serif; font-weight:400; font-size:76px; line-height:1.05; letter-spacing:-0.05em;
92  color:${e.textHi}; margin-bottom:84px; opacity:0; animation:fadeUp .7s ease forwards .1s; }
93.headline span { color:${e.lime}; }
94.flow { flex:1; min-height:0; display:flex; align-items:stretch; gap:26px; }
95.card { flex:1; min-width:0; position:relative; display:flex; flex-direction:column;
96  background:${e.card}; border:1px solid ${e.borderSt}; border-radius:20px; padding:46px 42px;
97  opacity:0; transform:translateY(26px); animation:cardUp .7s cubic-bezier(.16,1,.3,1) forwards;
98  transition:transform .45s cubic-bezier(.34,1.4,.64,1), border-color .35s ease, box-shadow .4s ease; }
99.card:hover { transform:translateY(-10px); border-color:rgba(208,236,26,.42);
100  box-shadow:0 28px 60px rgba(0,0,0,.42); }
101@keyframes cardUp { to { opacity:1; transform:translateY(0); } }
102.card-top { display:flex; flex-direction:column; gap:10px;
103  padding-bottom:28px; border-bottom:1px solid ${e.borderSt}; }
104.card-num { font-family:'Inter',sans-serif; font-weight:600; font-size:88px; line-height:.9;
105  letter-spacing:-.04em; color:${e.lime}; }
106.card-name { font-family:'Inter',sans-serif; font-weight:500; font-size:34px; line-height:1.1;
107  letter-spacing:-.025em; color:${e.textHi}; }
108.card ul { list-style:none; margin-top:44px; }
109.card li { padding:22px 0;
110  font-size:26px; font-weight:400; line-height:1.35; color:#e8e6e2;
111  border-bottom:1px solid ${e.borderSt};
112  opacity:0; transform:translateY(12px); animation:liUp .55s ease forwards; }
113.card li:first-child { padding-top:0; }
114.card li:last-child { border-bottom:none; }
115@keyframes liUp { to { opacity:1; transform:translateY(0); } }
116</style></head><body>
117<h1 class="headline">O que vamos <span>ver.</span></h1>
118<div class="flow">
119  ${M("01","A migração",["As 11 customizações da loja, com status","O que encontramos e como resolvemos","Paridade, segurança e go-live respondidos"],.18)}
120  ${M("02","A implementação",["As duas semanas em agenda, dia por dia","O go-live de 1% a 100% em um dia","O time e os rituais"],.3)}
121  ${M("03","Depois do go-live",["Os agentes que operam a loja","Seis agências em um contrato","A conta até dezembro"],.42)}
122</div>
123</body></html>`,oe=[["quatroPontas",1420,0],["tacoChines",1520,0],["arabela",1620,0],["flor",1720,0],["quatroPontas",1820,0],["tacoChines",1620,100],["arabela",1720,100],["flor",1820,100],["quatroPontas",1820,200],["tacoChines",0,980],["arabela",100,980],["flor",200,980],["quatroPontas",300,980],["tacoChines",400,980],["arabela",100,880]],te=oe.map(([a,o,t],i)=>D(a,o,t,u[(Math.round(o/100)+Math.round(t/100))%u.length],.25+i*.04)).join(""),U=(a,o,t,i)=>{const f=["01 · A migração","02 · A implementação","03 · Depois do go-live"].map((S,j)=>`<span class="step${j+1===a?" active":""}">${S}</span>`).join('<span class="step-arrow">→</span>');return`<!DOCTYPE html><html><head><style>
124${s}
125${B}
126${n}
127${P}
128body { display:flex; flex-direction:column; justify-content:center; padding:80px 112px; position:relative; overflow:hidden; }
129${i}
130.header { position:relative; z-index:1; max-width:1600px; }
131.steps { display:flex; gap:16px; align-items:center; margin-bottom:44px; flex-wrap:wrap;
132  opacity:0; animation:fadeDown .6s ease forwards .1s; }
133.step { font-family:'JetBrains Mono',monospace; font-size:clamp(12px,.92vw,15px); letter-spacing:.13em; text-transform:uppercase;
134  padding:11px 19px; border:1px solid ${e.border}; border-radius:999px; color:${e.textMute}; white-space:nowrap; }
135.step.active { color:${e.lime}; border-color:${e.lime}; background:rgba(208,236,26,0.10); }
136.step-arrow { color:${e.borderSt}; font-size:18px; line-height:1; }
137.spine { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(60px,6vw,98px); line-height:1.02;
138  letter-spacing:-.05em; color:${e.textHi}; max-width:1600px; margin-bottom:32px;
139  opacity:0; animation:fadeUp .7s ease forwards .2s; }
140.spine .accent { color:${e.lime}; }
141.sub { font-size:clamp(20px,1.6vw,30px); font-weight:300; color:${e.textDim}; line-height:1.45; max-width:1400px;
142  opacity:0; animation:fadeUp .6s ease forwards .45s; }
143</style></head><body>
144${te}
145<div class="header">
146  <div class="steps">${f}</div>
147  <h2 class="spine">${o}</h2>
148  ${t?`<p class="sub">${t}</p>`:""}
149</div>
150</body></html>`},ie=U(1,'Do VTEX IO para <span class="accent">FastStore v4</span>,<br>em três semanas.',"O que migra, o que fica exatamente onde está, e o critério de aceite que a gente assina embaixo.",r(e.lime,"top:-220px; right:-160px;")),se=U(2,'Três semanas,<br><span class="accent">dia por dia.</span>',"O que a gente entrega em cada dia, o que precisamos de vocês, e quando o tráfego começa a virar.",r(e.lime,"top:-220px; left:-160px;")),ne=U(3,'E depois do go-live,<br><span class="accent">quem opera a loja.</span>',"Os agentes, o perímetro do que a deco assume no dia a dia, e como a conta fica até dezembro.",r(e.purple,"bottom:-220px; left:-160px;")),O=[{label:"Monitoring",mode:"agent",agentName:"Agent de Monitoramento",icon:"monitoring"},{label:"Card",mode:"deco"},{label:"Spec",mode:"agent",agentName:"Agent de Specs",icon:"description"},{label:"Design",mode:"agent",agentName:"Agent de Design System",icon:"palette"},{label:"Aprovação humana",mode:"deco"},{label:"Código",mode:"agent",agentName:"Agent Developer",icon:"code"},{label:"Code review",mode:"agent",agentName:"Agent Code Reviewer",icon:"rate_review"},{label:"QA",mode:"agent",agentName:"Agent de QA",icon:"task_alt"},{label:"Merge/Deploy",mode:"deco"}
150],E=(a,o,t,i)=>a==="agent"?`
151  <div class="fcell agent" style="animation-delay:${i}s">
152    <span class="icon-badge agent-badge"><span class="ms">${t}</span></span>
153    <span class="flabel">${o}</span>
154  </div>`:a==="deco"?`
155  <div class="fcell deco" style="animation-delay:${i}s">
156    <img class="deco-mark" src="${A}" alt="deco">
157    <span class="flabel">Eng. sênior deco</span>
158  </div>`:`
159  <div class="fcell human" style="animation-delay:${i}s">
160    <span class="icon-badge"><span class="ms">person</span></span>
161  </div>`,re=`<!DOCTYPE html><html><head>
162${c}
163<style>
164${s}
165${l}
166${n}
167${d}
168${m}
169body { display:flex; flex-direction:column; padding:56px 88px 46px; position:relative; overflow:hidden; }
170${r(e.laccent,"bottom:-220px; left:-160px;")}
171.header { position:relative; z-index:1; margin-bottom:30px; }
172h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(50px,4.8vw,70px); line-height:1.08;
173  letter-spacing:-.05em; color:${e.ltext}; max-width:1600px;
174  opacity:0; animation:fadeUp .7s ease forwards .15s; }
175h1.head .accent { color:${e.laccent}; }
176.kgrid { flex:1; min-height:0; position:relative; z-index:1; margin-top:26px;
177  display:grid; grid-template-columns:220px repeat(9,1fr); grid-template-rows:auto 1fr 1fr; gap:10px; }
178.colhead { font-family:'Inter',sans-serif; font-size:21px; font-weight:500; letter-spacing:-.01em; color:${e.ltext};
179  text-align:center; display:flex; align-items:center; justify-content:center; line-height:1.2; padding:0 4px; }
180.rowlabel { display:flex; align-items:center; font-size:26px; font-weight:600; color:${e.ltext}; line-height:1.25; }
181.rowlabel .accent { color:${e.laccent}; }
182.fcell { border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
183  margin:0; padding:26px 10px; background:#fff; border:1px solid ${e.lborder};
184  opacity:0; transform:translateY(10px); animation:cardUp .5s cubic-bezier(.16,1,.3,1) forwards; }
185.icon-badge { width:76px; height:76px; border-radius:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
186.icon-badge .ms { font-size:38px; }
187.icon-badge.agent-badge { background:color-mix(in srgb, ${e.purple} 16%, transparent); color:${e.purple}; }
188.fcell .flabel { font-family:'Inter',sans-serif; font-size:16.5px; font-weight:600; letter-spacing:-.01em;
189  text-align:center; line-height:1.3; min-height:2.6em; display:flex; align-items:center; justify-content:center; }
190.fcell.human { background:${e.lbg}; }
191.fcell.human .icon-badge { background:${e.lborder}; width:64px; height:64px; }
192.fcell.human .icon-badge .ms { color:${e.lmute}; font-size:32px; }
193.fcell.deco { background:${e.lime}; border-color:${e.lime}; }
194.fcell.deco .deco-mark { width:64px; height:auto; }
195.fcell.deco .flabel { color:${e.limeDark}; }
196.fcell.agent .flabel { color:${e.ltext}; }
197</style></head><body>
198<div class="header">
199  <p class="eyebrow">3.2 · Depois do go-live · o processo, ponta a ponta</p>
200  <h1 class="head">Mesmo fluxo. <span class="accent">Menos fila.</span></h1>
201</div>
202<div class="kgrid">
203  <div></div>
204  ${O.map(a=>`<div class="colhead">${a.label}</div>`).join("")}
205  <div class="rowlabel">Fluxo da Operação Hoje</div>
206  ${O.map((a,o)=>E("human",void 0,void 0,.1+o*.03)).join("")}
207  <div class="rowlabel"><span>Fluxo <span class="accent">8x</span> Mais Eficiente com AI</span></div>
208  ${O.map((a,o)=>E(a.mode,a.agentName,a.icon,.45+o*.03)).join("")}
209</div>
210</body></html>`,le=`<div class="viz viz-prior">
211  <span class="prow r1"></span>
212  <span class="prow r2"></span>
213  <span class="prow r3"></span>
214  <span class="pticket"></span>
215</div>`,pe=`<div class="viz viz-design">
216  <span class="dblock b1"></span>
217  <span class="dblock b2"></span>
218  <span class="dblock b3"></span>
219  <span class="dsel"></span>
220</div>`,de=`<div class="viz viz-code">
221  <span class="cline l1"></span>
222  <span class="cline l2"></span>
223  <span class="cline l3"></span>
224  <span class="ccursor"></span>
225</div>`,ce=`<div class="viz viz-qa">
226  ${Array.from({length:3},(a,o)=>'<div class="qrow"><span class="qbox"></span><span class="qline"></span></div>').join("")}
227</div>`,me=`<div class="viz viz-review">
228  <span class="rline l1"></span>
229  <span class="rline l2"></span>
230  <span class="rline l3"></span>
231  <span class="rscan"></span>
232  <span class="rcheck"></span>
233</div>`,fe=`<div class="viz viz-observ">
234  <span class="span s1"></span>
235  <span class="span s2"></span>
236  <span class="span s3"></span>
237  <span class="span s4"></span>
238</div>`,xe=`<div class="viz viz-monitor">
239  <svg viewBox="0 0 180 62">
240    <line class="mthresh" x1="2" y1="18" x2="178" y2="18"></line>
241    <polyline class="mline" pathLength="100"
242      points="2,48 22,44 42,50 62,42 82,46 96,10 110,48 130,45 150,49 178,44"></polyline>
243    <circle class="mping" cx="96" cy="10" r="4"></circle>
244    <circle class="mdot" cx="96" cy="10" r="4"></circle>
245  </svg>
246</div>`,h=(a,o,t,i,p,f="")=>`
247  <div class="acard" style="animation-delay:${p}s">
248    <span class="acard-top">
249      <span class="acard-num">${a}</span>
250      ${f?`<span class="acard-tag">${f}</span>`:""}
251    </span>
252    ${o}
253    <div class="acard-title">${t}</div>
254    <p class="acard-gain">${i}</p>
255  </div>`,ge=`<!DOCTYPE html><html><head>
256${c}
257<style>
258${s}
259${l}
260${n}
261${d}
262${m}
263body { display:flex; flex-direction:column; padding:60px 88px 56px; position:relative; overflow:hidden; }
264${r(e.laccent,"top:-240px; right:-160px;")}
265.header { position:relative; z-index:1; }
266h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(46px,4.4vw,64px); line-height:1.06;
267  letter-spacing:-.05em; color:${e.ltext}; max-width:1600px;
268  opacity:0; animation:fadeUp .7s ease forwards .15s; }
269h1.head .accent { color:${e.laccent}; }
270.sub { margin-top:14px; font-size:22px; font-weight:300; color:${e.lbody}; max-width:1400px;
271  opacity:0; animation:fadeUp .7s ease forwards .25s; }
272.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; flex-direction:column;
273  justify-content:center; gap:28px; }
274.row { display:flex; align-items:stretch; }
275.acard { flex:1; min-width:0; background:#fff; border:1px solid ${e.lborder}; border-radius:24px;
276  padding:36px 32px; display:flex; flex-direction:column;
277  opacity:0; transform:translateY(20px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards; }
278.chevron { width:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:${e.lborder}; }
279.chevron .ms { font-size:24px; }
280.acard-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
281.acard-num { font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.1em; color:${e.lmute}; }
282.acard-tag { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
283  color:${e.laccent}; background:color-mix(in srgb, ${e.laccent} 14%, transparent);
284  padding:4px 8px; border-radius:5px; }
285.acard-title { font-size:21px; font-weight:500; color:${e.ltext}; letter-spacing:-.02em; line-height:1.3; }
286.acard-gain { margin-top:12px; padding-top:12px; border-top:1px solid ${e.lborder};
287  font-size:13.5px; font-weight:600; color:${e.laccent}; line-height:1.4; }
288
289.viz { position:relative; height:92px; margin-bottom:22px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
290
291/* 01 · priorização — três filas por prioridade, um ticket sobe até a do topo */
292.viz-prior { flex-direction:column; justify-content:center; align-items:flex-start; gap:10px; width:100%; }
293.prow { height:11px; border-radius:4px; background:color-mix(in srgb, ${e.laccent} 14%, transparent);
294  border:1px solid color-mix(in srgb, ${e.laccent} 32%, transparent); }
295.prow.r1 { width:82%; animation:rowPulse 3.2s ease-in-out infinite; }
296.prow.r2 { width:58%; }
297.prow.r3 { width:36%; }
298@keyframes rowPulse { 0%,64%,100%{background:color-mix(in srgb, ${e.laccent} 14%, transparent)}
299  72%,88%{background:color-mix(in srgb, ${e.laccent} 52%, transparent)} }
300.pticket { position:absolute; left:3px; width:16px; height:11px; border-radius:4px; background:${e.laccent};
301  animation:ticketRise 3.2s cubic-bezier(.4,0,.2,1) infinite; }
302@keyframes ticketRise {
303  0%       { top:61.5px; opacity:0; }
304  7%       { top:61.5px; opacity:1; }
305  32%      { top:61.5px; opacity:1; }
306  46%,56%  { top:40.5px; opacity:1; }
307  70%,90%  { top:19.5px; opacity:1; }
308  97%,100% { top:19.5px; opacity:0; }
309}
310
311/* 02 · design — uma seleção percorre os blocos da UI, mantendo o padrão */
312.viz-design { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; }
313.dblock { background:color-mix(in srgb, ${e.laccent} 12%, transparent); border:1px solid color-mix(in srgb, ${e.laccent} 30%, transparent); }
314.dblock.b1 { width:34px; height:34px; border-radius:50%; }
315.dblock.b2 { width:64px; height:34px; border-radius:8px; }
316.dblock.b3 { width:44px; height:34px; border-radius:8px; }
317.dsel { position:absolute; border:2px solid ${e.laccent}; border-radius:50%;
318  animation:selMove 3.6s cubic-bezier(.66,0,.28,1) infinite; }
319@keyframes selMove {
320  0%,26%   { left:calc(50% - 81px); width:34px; height:34px; border-radius:50%; }
321  34%,60%  { left:calc(50% - 37px); width:64px; height:34px; border-radius:8px; }
322  68%,92%  { left:calc(50% + 37px); width:44px; height:34px; border-radius:8px; }
323  100%     { left:calc(50% - 81px); width:34px; height:34px; border-radius:50%; }
324}
325
326/* 03 · implementação — linhas de código se digitando, com cursor piscando */
327.viz-code { flex-direction:column; justify-content:center; align-items:flex-start; gap:11px; width:100%; }
328.cline { height:9px; border-radius:3px; background:color-mix(in srgb, ${e.laccent} 22%, transparent); width:0; }
329.cline.l1 { max-width:72%; animation:typeLine 3s ease-in-out infinite; animation-delay:0s; }
330.cline.l2 { max-width:94%; animation:typeLine 3s ease-in-out infinite; animation-delay:.5s; }
331.cline.l3 { max-width:48%; animation:typeLine 3s ease-in-out infinite; animation-delay:1s; }
332@keyframes typeLine { 0%,4%{width:0} 34%,80%{width:100%} 94%,100%{width:0} }
333.ccursor { position:absolute; left:0; top:61.5px; width:2.5px; height:9px; background:${e.laccent};
334  animation:cursorBlink .9s step-end infinite, cursorTrail 3s ease-in-out 1s infinite; }
335@keyframes cursorBlink { 0%,55%{opacity:1} 56%,100%{opacity:0} }
336@keyframes cursorTrail { 0%,4%{left:0} 34%,80%{left:48%} 94%,100%{left:0} }
337
338/* 04 · QA — checklist marcando os itens em sequência, depois reinicia */
339.viz-qa { flex-direction:column; justify-content:center; align-items:stretch; gap:11px; width:100%; }
340.qrow { display:flex; align-items:center; gap:10px; }
341.qbox { position:relative; width:16px; height:16px; border-radius:4px; flex-shrink:0;
342  border:1.5px solid color-mix(in srgb, ${e.laccent} 45%, transparent); }
343.qbox::after { content:""; position:absolute; left:2px; top:5px; width:9px; height:5px;
344  border-left:2px solid ${e.laccent}; border-bottom:2px solid ${e.laccent}; transform-origin:center;
345  animation:checkPulse 3.6s ease-in-out infinite; }
346.qline { flex:1; height:8px; border-radius:3px; background:color-mix(in srgb, ${e.laccent} 12%, transparent); }
347.viz-qa .qrow:nth-child(1) .qbox::after { animation-delay:0s; }
348.viz-qa .qrow:nth-child(2) .qbox::after { animation-delay:.34s; }
349.viz-qa .qrow:nth-child(3) .qbox::after { animation-delay:.68s; }
350.qbox { transition:border-color .3s ease; }
351@keyframes checkPulse {
352  0%,6%   { opacity:0; transform:rotate(-45deg) scale(.3); }
353  16%     { opacity:1; transform:rotate(-45deg) scale(1.18); }
354  22%,78% { opacity:1; transform:rotate(-45deg) scale(1); }
355  90%,100%{ opacity:0; transform:rotate(-45deg) scale(.3); }
356}
357
358/* 05 · code review — uma faixa de leitura desce sobre as linhas, termina num check */
359.viz-review { flex-direction:column; justify-content:center; align-items:flex-start; gap:11px; width:100%; position:relative; }
360.rline { height:9px; border-radius:3px; background:color-mix(in srgb, ${e.laccent} 22%, transparent); }
361.rline.l1 { width:78%; } .rline.l2 { width:92%; } .rline.l3 { width:60%; }
362.rscan { position:absolute; left:0; right:22px; top:-4px; height:13px; border-radius:4px;
363  background:color-mix(in srgb, ${e.laccent} 34%, transparent); opacity:0;
364  animation:scanDown 3.4s ease-in-out infinite; }
365@keyframes scanDown {
366  0%       { top:12px;   opacity:0; }
367  7%       { top:19.5px; opacity:1; }
368  24%,32%  { top:19.5px; opacity:1; }
369  46%,54%  { top:39.5px; opacity:1; }
370  68%,86%  { top:59.5px; opacity:1; }
371  94%,100% { top:59.5px; opacity:0; }
372}
373.rcheck { position:absolute; right:0; top:58.5px; width:15px; height:15px; border-radius:50%;
374  border:1.5px solid ${e.laccent}; opacity:0; transform-origin:center;
375  animation:checkAppear 3.4s cubic-bezier(.34,1.4,.64,1) infinite; }
376.rcheck::after { content:""; position:absolute; left:3.5px; top:5px; width:7px; height:4px;
377  border-left:1.5px solid ${e.laccent}; border-bottom:1.5px solid ${e.laccent}; transform:rotate(-45deg); }
378@keyframes checkAppear {
379  0%,74%   { opacity:0; transform:scale(.4); }
380  84%      { opacity:1; transform:scale(1.15); }
381  88%,94%  { opacity:1; transform:scale(1); }
382  100%     { opacity:0; transform:scale(1); }
383}
384
385/* 06 · observabilidade — waterfall de spans, como um trace distribuído */
386.viz-observ { flex-direction:column; justify-content:center; align-items:flex-start; gap:9px; width:100%; }
387.span { height:10px; border-radius:3px; background:color-mix(in srgb, ${e.laccent} 34%, transparent); }
388.span.s1 { width:86%; margin-left:0;   opacity:.95; }
389.span.s2 { width:58%; margin-left:12%; opacity:.8; }
390.span.s3 { width:40%; margin-left:26%; opacity:.65; }
391.span.s4 { width:24%; margin-left:38%; opacity:.5; }
392
393/* 07 · monitoramento — série temporal se desenhando; o pico cruza o limite */
394.viz-monitor { justify-content:center; width:100%; }
395.viz-monitor svg { width:100%; height:100%; overflow:visible; }
396.mthresh { stroke:color-mix(in srgb, ${e.laccent} 40%, transparent); stroke-width:1.5; stroke-dasharray:4 4; }
397.mline { fill:none; stroke:${e.laccent}; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;
398  stroke-dasharray:100; stroke-dashoffset:100; animation:traceDraw 3.4s ease-in-out infinite; }
399@keyframes traceDraw { 0%,4%{stroke-dashoffset:100} 52%,82%{stroke-dashoffset:0} 96%,100%{stroke-dashoffset:100} }
400.mdot { fill:${e.laccent};
400 opacity:0; animation:alertPing 3.4s ease-in-out infinite; }
401.mping { fill:none; stroke:${e.laccent}; stroke-width:1.5; opacity:0;
402  transform-box:fill-box; transform-origin:center; animation:alertRing 3.4s ease-in-out infinite; }
403@keyframes alertPing { 0%,28%{opacity:0} 34%,86%{opacity:1} 95%,100%{opacity:0} }
404@keyframes alertRing {
405  0%,29%   { opacity:0; transform:scale(.6); }
406  38%      { opacity:.8; transform:scale(1); }
407  62%,100% { opacity:0; transform:scale(2.6); }
408}
409</style></head><body>
410<div class="header">
411  <p class="eyebrow">3.1 · Depois do go-live · o time de agentes</p>
412  <h1 class="head">Os agentes que <span class="accent">operam a sua loja.</span></h1>
413</div>
414<div class="stage">
415  <div class="row">
416    ${h("01",xe,"Agent de Monitoramento","400 checks contínuos: performance, qualidade dos dados, SEO e mais.",.15,"24/7")}
417    <div class="chevron"><span class="ms">chevron_right</span></div>
418    ${h("02",le,"Agent de Priorização","Refinamento que levava dias de reunião sai em minutos.",.22)}
419    <div class="chevron"><span class="ms">chevron_right</span></div>
420    ${h("03",pe,"Agent de Design System","Um protótipo em alta fidelidade que levava dias de handoff sai em minutos.",.29)}
421    <div class="chevron"><span class="ms">chevron_right</span></div>
422    ${h("04",de,"Agent Developer","Uma feature que levava uma sprint sai em horas.",.36)}
423  </div>
424  <div class="row">
425    ${h("05",me,"Agent Code Reviewer","Code review que levava um dia de fila acontece em minutos.",.43)}
426    <div class="chevron"><span class="ms">chevron_right</span></div>
427    ${h("06",ce,"Agent de QA","Um ciclo de QA que levava dias roda em minutos.",.5)}
428    <div class="chevron"><span class="ms">chevron_right</span></div>
429    ${h("07",fe,"Agent de Observabilidade","Rastreia código, filas e banco de dados por dentro da operação.",.57,"24/7")}
430  </div>
431</div>
432</body></html>`,he=`<!DOCTYPE html><html><head>
433<link rel="preconnect" href="https://fonts.googleapis.com">
434<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..400,0,0" rel="stylesheet">
435<style>
436${s}
437${l}
438${n}
439${d}
440body { display:flex; flex-direction:column; padding:58px 88px 48px; position:relative; overflow:hidden; }
441${r(e.laccent,"bottom:-220px; left:-160px;")}
442.ms { font-family:'Material Symbols Sharp'; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 40; line-height:1; }
443.header { position:relative; z-index:1; margin-bottom:30px; }
444h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(50px,4.8vw,72px); line-height:1.05;
445  letter-spacing:-0.05em; color:${e.ltext};
446  opacity:0; animation:fadeUp .7s ease forwards .15s; }
447h1.head .accent { color:${e.laccent}; }
448.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; flex-direction:column; gap:22px;
449  opacity:0; animation:fadeUp .65s cubic-bezier(.16,1,.3,1) forwards .35s; }
450.board { flex:1; min-height:0; background:#fff; border:1px solid ${e.lborder}; border-radius:22px;
451  box-shadow:0 26px 64px rgba(7,64,26,.08), 0 2px 6px rgba(7,64,26,.04);
452  display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
453.col { padding:38px 44px; display:flex; flex-direction:column; }
454.col.studio { border-left:1px solid ${e.lborder}; }
455.col-name { font-weight:600; font-size:27px; color:${e.ltext}; letter-spacing:-.02em;
456  padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid ${e.lborder}; }
457.feats { flex:1; display:flex; flex-direction:column; justify-content:flex-start; gap:30px; }
458.feat { display:flex; gap:22px; align-items:center; }
459.feat-ic { width:46px; height:46px; flex-shrink:0; border-radius:12px;
460  display:flex; align-items:center; justify-content:center; }
461.feat-ic .ms { font-size:25px; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 40; }
462.col:not(.studio) .feat-ic { background:${e.ltext}; }
463.col:not(.studio) .feat-ic .ms { color:${e.lime}; }
464.col.studio .feat-ic { background:${e.purple}; }
465.col.studio .feat-ic .ms { color:#231a52; }
466.feat-av { width:54px; height:54px; flex-shrink:0; border-radius:50%;
467  background:linear-gradient(150deg,#2a6b3a,${e.ltext}); border:2px solid ${e.lime};
468  display:flex; align-items:center; justify-content:center; overflow:hidden;
469  box-shadow:0 4px 14px rgba(7,64,26,.2); }
470.feat-av img { width:100%; height:100%; object-fit:cover; }
471.feat-av .ini { font-family:'Inter',sans-serif; font-weight:600; font-size:24px; color:${e.lime}; letter-spacing:-.01em; }
472.feat-txt b { display:block; font-size:22px; font-weight:600; color:${e.ltext}; letter-spacing:-.015em; line-height:1.25; margin-bottom:4px; }
473.feat-txt span { font-size:22px; font-weight:300; color:${e.lbody}
473; line-height:1.35; }
474.cadence { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
475.cad { background:${e.card}; border:1px solid ${e.borderSt}; border-radius:16px; padding:34px 30px 40px;
476  display:flex; flex-direction:column; }
477.cad-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
478.cad-ic { width:46px; height:46px; flex-shrink:0; border-radius:12px; background:${e.lime};
479  display:flex; align-items:center; justify-content:center; }
480.cad-ic .ms { font-size:26px; color:${e.limeDark}; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 40; }
481.cad-w { font-family:'JetBrains Mono',monospace; font-size:16px; letter-spacing:.13em;
482  text-transform:uppercase; color:${e.lime}; }
483.cad-t { font-size:24px; font-weight:600; letter-spacing:-.015em; color:${e.textHi}; margin-bottom:9px; }
484.cad p { font-size:18.5px; font-weight:400; line-height:1.5; color:#c9c4be; }
485</style></head><body>
486<div class="header">
487  <p class="eyebrow">2.5 · A implementação · o time e os rituais</p>
488  <h1 class="head">Quem está na mesa, <span class="accent">e o que precisamos de vocês.</span></h1>
489</div>
490<div class="stage">
491  <div class="board">
492    <div class="col">
493      <div class="col-name">Quem a deco põe na mesa</div>
494      <div class="feats">
495        <div class="feat">
496          <span class="feat-ic"><span class="ms">support_agent</span></span>
497          <span class="feat-txt"><b>Account manager conduz a conta</b><span>ponto único para prioridade, prazo e escopo</span></span>
498        </div>
499        <div class="feat">
500          <span class="feat-ic"><span class="ms">engineering</span></span>
501          <span class="feat-txt"><b>Engenheiro de referência</b><span>quem criou a FastStore está no time, com acesso direto ao produto da VTEX</span></span>
502        </div>
503        <div class="feat">
504          <span class="feat-ic"><span class="ms">code</span></span>
505          <span class="feat-txt"><b>Dev fixo, mais squad sob demanda</b><span>a squad abre nas semanas de pico e fecha depois</span></span>
506        </div>
507        <div class="feat">
508          <span class="feat-ic"><span class="ms">shield</span></span>
509          <span class="feat-txt"><b>Especialista de segurança</b><span>roda o pentest antes do go-live</span></span>
510        </div>
511      </div>
512    </div>
513    <div class="col studio">
514      <div class="col-name">O que precisamos da Ri Happy</div>
515      <div class="feats">
516        <div class="feat">
517          <span class="feat-ic"><span class="ms">how_to_reg</span></span>
518          <span class="feat-txt"><b>Um responsável por aprovações</b><span>quem assina o aceite e dá o GO de cada degrau do go-live</span></span>
519        </div>
520        <div class="feat">
521          <span class="feat-ic"><span class="ms">groups</span></span>
522          <span class="feat-txt"><b>Time de conteúdo e de negócio no treinamento</b><span>quinta 24/09, uma hora, com o site no ar</span></span>
523        </div>
524        <div class="feat">
525          <span class="feat-ic"><span class="ms">schedule</span></span>
526          <span class="feat-txt"><b>30 min na daily, 1 hora na semana de homologação</b><span>e quem aprova cada ponto precisa estar na sessão daquele dia</span></span>
527        </div>
528        <div class="feat">
529          <span class="feat-ic"><span class="ms">dns</span></span>
530          <span class="feat-txt"><b>O subdomínio de testes configurado</b><span>faststore.rihappy.com.br apontando para o ambiente novo</span></span>
531        </div>
532      </div>
533    </div>
534  </div>
535  <div class="cadence">
536    <div class="cad"><div class="cad-head"><span class="cad-ic"><span class="ms">schedule</span></span><span class="cad-w">Todo dia</span></div><div class="cad-t">Daily de 30 minutos</div><p>durante as três semanas · na semana 1 serve só para tirar dúvidas · destrava o dia sem virar reunião</p></div>
537    <div class="cad"><div class="cad-head"><span class="cad-ic"><span class="ms">calendar_view_week</span></span><span class="cad-w">Toda semana</span></div><div class="cad-t">Weekly</div><p>prioridades da semana · o que foi entregue contra o combinado · métricas contra o baseline</p></div>
538    <div class="cad"><div class="cad-head"><span class="cad-ic"><span class="ms">chat</span></span><span class="cad-w">Sempre aberto</span></div><div class="cad-t">Grupo dedicado no WhatsApp</div><p>engenharia da deco e time da Ri Happy no mesmo canal · SLA de 1h útil · sem abrir ticket e sem esperar reunião</p></div>
539  </div>
540</div>
541</body></html>`,R=1744,w=464,_=140,H=22,k=672,z=60,G=280,I=w/2,be=[0,1,2].map(a=>a*(_+H)+_/2),ue=[.25,.75].map(a=>
541w*a),ve=k,Y=k+z,J=Y+G,ye=J+z,L=(a,o,t,i)=>{if(Math.abs(i-o)<1)return`M ${a} ${o} H ${t}`;const p=(t-a)/2;return`M ${a} ${o} C ${a+p} ${o}, ${t-p} ${i}, ${t} ${i}`},$e=[...be.map(a=>L(ve,a,Y,I)),...ue.map(a=>L(J,I,ye,a))],g="#d8d5ce",we=`<svg viewBox="0 0 140 152" preserveAspectRatio="xMidYMid slice">
542  <rect x="12" y="24" width="152" height="132" rx="9" fill="#fff" stroke="${e.lborder}" stroke-width="2"/>
543  <path d="M12 42h152" stroke="${e.lborder}" stroke-width="2"/>
544  <circle cx="22" cy="33" r="2.4" fill="${g}"/>
545  <circle cx="31" cy="33" r="2.4" fill="${g}"/>
546  <circle cx="40" cy="33" r="2.4" fill="${g}"/>
547  <rect x="52" y="29" width="76" height="8" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/>
548  <rect x="100" y="54" width="60" height="44" rx="5" fill="${e.lime}"/>
549  <rect x="26" y="58" width="58" height="7" rx="3.5" fill="${g}"/>
550  <rect x="26" y="71" width="40" height="7" rx="3.5" fill="${g}"/>
551  <rect x="26" y="87" width="44" height="14" rx="7" fill="${e.lime}"/>
552  <rect x="26" y="112" width="34" height="34" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/>
553  <rect x="64" y="112" width="34" height="34" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/>
554  <rect x="102" y="112" width="34" height="34" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/>
555</svg>`,ke=`<svg viewBox="0 0 140 152" preserveAspectRatio="xMidYMid slice">
556  <rect x="8" y="16" width="124" height="164" rx="16" fill="#fff" stroke="${e.lborder}" stroke-width="2"/>
557  <rect x="55" y="25" width="30" height="4.5" rx="2.25" fill="${g}"/>
558  <rect x="24" y="38" width="92" height="44" rx="6" fill="${e.lime}"/>
559  <rect x="24" y="90" width="42" height="26" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/>
560  <rect x="74" y="90" width="42" height="26" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/>
561  <rect x="24" y="122" width="42" height="26" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/>
562  <rect x="74" y="122" width="42" height="26" rx="4" fill="none" stroke="${e.lborder}" stroke-width="1.5"/>
563</svg>`,ze=`<svg viewBox="0 0 140 152" preserveAspectRatio="xMidYMid slice">
564  <path d="M26 22h72a16 16 0 0 1 16 16v22a16 16 0 0 1-16 16H44l-14 12 2-12h-6a16 16 0 0 1-16-16V38a16 16 0 0 1 16-16Z"
565    fill="#fff" stroke="${e.lborder}" stroke-width="2"/>
566  <rect x="26" y="38" width="66" height="7" rx="3.5" fill="${g}"/>
567  <rect x="26" y="51" width="42" height="7" rx="3.5" fill="${g}"/>
568  <path d="M60 82h84a16 16 0 0 1 16 16v22a16 16 0 0 1-16 16H78l-14 12 2-12h-6a16 16 0 0 1-16-16V98a16 16 0 0 1 16-16Z"
569    fill="${e.lime}"/>
570  <rect x="60" y="98" width="64" height="7" rx="3.5" fill="color-mix(in srgb, ${e.limeDark} 30%, transparent)"/>
571  <rect x="60" y="111" width="40" height="7" rx="3.5" fill="color-mix(in srgb, ${e.limeDark} 30%, transparent)"/>
572</svg>`,Ae=[{art:we,name:"Site",detail:"Loja web"},{art:ke,name:"App",detail:"iOS e Android"},{art:ze,name:"Concierge",detail:"Chat, e-mail, WhatsApp"}],Se=[{group:"Serviços que você terceiriza hoje",items:[{label:"Implementação",icon:"code"},{label:"CRO",icon:"ads_click"},{label:"SEO",icon:"search"},{label:"Integrações",icon:"hub"},{label:"UX",icon:"grid_view"},{label:"Performance",icon:"trending_up"}]},{group:"Software que vem junto",items:[{label:"CMS",icon:"description"},{label:"Studio",icon:"widgets"},{label:"Monitoramento",icon:"monitoring"},{label:"Agentes",icon:"smart_toy"}]}],je=(a,o)=>`
573  <div class="hchan" style="animation-delay:${o}s">
574    <div class="hchan-art">${a.art}</div>
575    <div class="hchan-txt"><b>${a.name}</b><span>${a.detail}</span></div>
576  </div>`,qe=(a,o)=>`
577  <div class="hgroup" style="animation-delay:${o}s">
578    <p class="hgroup-name">${a.group}</p>
579    <ul class="hgroup-pills">${a.items.map(t=>`<li><span class="pill-ic"><span class="ms">${t.icon}</span></span>${t.label}</li>`).join("")}</ul>
580  </div>`,Ce=`<!DOCTYPE html><html><head>
581${c}
582<style>
583${s}
584${l}
585${n}
586${d}
587${m}
588body { display:flex; flex-direction:column; padding:58px 88px 48px; position:relative; overflow:hidden; }
589${r(e.laccent,"top:-220px; right:-160px;")}
590.header { position:relative; z-index:1; margin-bottom:8px; text-align:center; }
591.eyebrow { text-align:center; }
592h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(42px,3.8vw,58px); line-height:1.12;
593  letter-spacing:-.05em; color:${e.ltext}; max-width:1500px; margin:0 auto;
594  opacity:0; animation:fadeUp .7s ease forwards .15s; }
595h1.head .accent { color:${e.laccent}; }
596.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; }
597.hub { width:${R}px; height:${w}px; position:relative;
598  display:grid; grid-template-columns:${k}px ${z}px ${G}px ${z}px ${k}px; }
599.traces { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
600.trace { fill:none; stroke:rgba(7,64,26,.28); stroke-width:1.5; stroke-linecap:round;
601  stroke-dasharray:7 7; animation:traceFlow 1s linear infinite; }
602@keyframes traceFlow { to { stroke-dashoffset:-14; } }
603.chans { grid-column:1; position:relative; z-index:1; height:100%; display:flex; flex-direction:column; gap:${H}px; }
604.hchan { flex:0 0 ${_}px; display:flex; align-items:stretch; background:#fff; border:1px solid ${e.lborder};
605  border-radius:18px; overflow:hidden; box-shadow:0 2px 10px rgba(7,64,26,.05);
606  opacity:0; transform:translateY(14px); animation:cardUp .55s cubic-bezier(.16,1,.3,1) forwards; }
607.hchan-art { width:128px; flex-shrink:0; position:relative; background:${e.lbg}; border-right:1px solid ${e.lborder}; }
608.hchan-art svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
609.hchan-txt { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:0 24px; }
610.hchan-txt b { font-size:21px; font-weight:600; color:${e.ltext}; letter-spacing:-.015em; }
611.hchan-txt span { font-size:15.5px; font-weight:400; color:${e.lbody}
611; margin-top:4px; }
612.hub-mark { grid-column:3; position:relative; z-index:1; height:100%;
613  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
614  opacity:0; animation:fadeIn .7s ease forwards .62s; }
615.hub-mark::before { content:""; position:absolute; width:260px; height:260px; border-radius:50%;
616  background:radial-gradient(closest-side, color-mix(in srgb, ${e.lime} 32%, transparent), color-mix(in srgb, ${e.lime} 8%, transparent) 55%, transparent 75%);
617  z-index:-1; }
618.hub-mark img { width:150px; height:auto; }
619.hub-mark .hub-label { margin-top:16px; font-family:'JetBrains Mono',monospace; font-size:14px;
620  letter-spacing:.14em; text-transform:uppercase; color:${e.laccent}; font-weight:600; }
621.groups { grid-column:5; position:relative; z-index:1; height:100%; display:grid; grid-template-rows:1fr 1fr; }
622.hgroup { align-self:center; opacity:0; transform:translateY(14px); animation:cardUp .55s cubic-bezier(.16,1,.3,1) forwards; }
623.hgroup-name { font-size:17px; font-weight:400; color:${e.lbody}; margin-bottom:14px; }
624.hgroup-pills { list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
625.hgroup-pills li { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid ${e.lborder};
626  border-radius:999px; padding:6px 18px 6px 6px; font-size:16px; font-weight:500; color:${e.ltext};
627  box-shadow:0 1px 2px rgba(7,64,26,.04); }
628.pill-ic { width:30px; height:30px; flex-shrink:0; border-radius:50%; background:color-mix(in srgb, ${e.laccent} 16%, transparent);
629  display:flex; align-items:center; justify-content:center; }
630.pill-ic .ms { font-size:16px; color:${e.laccent}; }
631</style></head><body>
632<div class="header">
633  <p class="eyebrow">3.3 · Depois do go-live · o contrato</p>
634  <h1 class="head">Substituímos 6 agências <span class="accent">em um contrato só.</span></h1>
635</div>
636<div class="stage">
637  <div class="hub">
638    <svg class="traces" viewBox="0 0 ${R} ${w}" preserveAspectRatio="none">
639      ${$e.map(a=>`<path class="trace" d="${a}"/>`).join("")}
640    </svg>
641    <div class="chans">${Ae.map((a,o)=>je(a,.2+o*.1)).join("")}</div>
642    <div class="hub-mark">
643      <img src="${A}" alt="deco">
644      <div class="hub-label">Um contrato</div>
645    </div>
646    <div class="groups">${Se.map((a,o)=>qe(a,.7+o*.12)).join("")}</div>
647  </div>
648</div>
649</body></html>`,Me="3.4 · Depois do go-live · escopo",Oe='O perímetro da deco: mexemos no <span class="accent">código e<br>no conteúdo</span> da experiência digital.',_e=[{kind:"in",icon:"check_circle",head:"No foco · nossa rotina",sub:"O código e o conteúdo da experiência, no dia a dia.",items:[{b:"Web Dev",q:"bugs, performance, evolução, testes A/B, integrações, segurança · VTEX e o front em FastStore v4"},{b:"Dados",q:"tracking, tags, qualidade de dado"},{b:"SEO técnico & e-commerce",q:"indexação, schema, Core Web Vitals"},{b:"SEO on-page em lotes",q:"title/meta, copy, URLs, alt text · centenas por mês"},{b:"CRO",q:"análise de funil e comportamento (recorrente)"},{b:"Conteúdo on-page",q:"categoria, coleção, descrição de produto"},{b:"Landing pages de campanha",q:"o código, não o desenho"}]},{kind:"proj",icon:"rocket_launch",head:"Projetos · priorizamos juntos",sub:"Não é rotina. Entram no plano quando decidimos juntos que são alavanca.",items:[{b:"App nativo",q:"alavanca mobile, mesma stack do site"},{b:"PLP & operação na VTEX",q:"redesenho por alavanca, não rotina"},{b:"Personalização e recomendação",q:"vitrines dinâmicas, se priorizado como alavanca"},{b:"GEO",q:"conteúdo proprietário e estratégia vs concorrência"}]},{kind:"out",icon:"block",head:"Fora · não entra",sub:"Não é a experiência digital. Fica com a Ri Happy ou com um parceiro.",items:[{b:"Mídia paga",q:"aquisição e gestão de campanhas"},{b:"Operação rotineira da VTEX",q:"subir coleção, promoção"},{b:"SEO local",q:"Google Business, mapas"},{b:"Link building / PR digital",q:"e assessoria de imprensa"},{b:"Logística",q:"e loja física"},{b:"Atendimento",q:"devoluções, CRM"},{b:"Figma",q:"entregamos protótipo codado, não o desenho"}]}],b={in:{tile:e.ltext,glyph:e.lime,head:e.ltext,chip:"rgba(7,64,26,.08)"},proj:{tile:e.amber,glyph:"#fff",head:"#7a5410",chip:"rgba(217,122,20,.12)"},out:{tile:"#a8a29e",glyph:"#fff",head:"#57534e",chip:"rgba(120,114,110,.1)"}}
649,De='<link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..400,0,0" rel="stylesheet">',Pe=`<!DOCTYPE html><html><head>
650${De}
651<style>
652${s}
653${l}
654${n}
655${d}
656body { display:flex; flex-direction:column; padding:50px 80px 40px; position:relative; overflow:hidden; }
657${r(e.laccent,"bottom:-240px; right:-180px;")}
658.ms { font-family:'Material Symbols Sharp'; line-height:1; }
659.header { position:relative; z-index:1; margin-bottom:30px; }
660.eyebrow { margin-bottom:16px; }
661h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(40px,3.3vw,54px); line-height:1.06;
662  letter-spacing:-.045em; color:#1c1917; max-width:1640px; opacity:0; animation:fadeUp .7s ease forwards .15s; }
663h1.head .accent { color:${e.laccent}; }
664.sub { margin-top:12px; font-size:21px; font-weight:300; color:${e.lbody}; opacity:0; animation:fadeUp .7s ease forwards .25s; }
665.scope { flex:1; min-height:0; position:relative; z-index:1; display:grid; grid-template-columns:1.12fr 1fr 1fr; gap:20px;
666  opacity:0; animation:fadeUp .65s ease forwards .35s; }
667.sc { background:#fff; border:1px solid ${e.lborder}; border-radius:20px; padding:36px 34px 30px;
668  display:flex; flex-direction:column; box-shadow:0 2px 12px rgba(7,64,26,.05);
669  opacity:0; transform:translateY(16px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards; }
670.sc:nth-child(1){animation-delay:.4s}.sc:nth-child(2){animation-delay:.5s}.sc:nth-child(3){animation-delay:.6s}
671@keyframes cardUp { to { opacity:1; transform:translateY(0); } }
672.sc-head { display:flex; align-items:center; gap:15px; margin-bottom:40px; }
673.sc-ic { width:50px; height:50px; flex-shrink:0; border-radius:13px; display:flex; align-items:center; justify-content:center; }
674.sc-ic .ms { font-size:28px; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 40; }
675.sc-h { font-size:29px; font-weight:600; letter-spacing:-.02em; line-height:1.15; flex:1; }
676.sc ul { list-style:none; display:flex; flex-direction:column; }
677.sc li { padding:14px 0; border-bottom:1px solid #f1efec; }
678.sc li:first-child { padding-top:0; } .sc li:last-child { border-bottom:none; padding-bottom:0; }
679.sc li b { display:block; font-size:22px; font-weight:600; letter-spacing:-.01em; line-height:1.25; margin-bottom:5px; }
680.sc li span { display:block; font-size:19.5px; font-weight:400; line-height:1.42; color:#5c5a55; }
681${["in","proj","out"].map((a,o)=>`.sc:nth-child(${o+1}) .sc-ic { background:${b[a].tile}; } .sc:nth-child(${o+1}) .sc-ic .ms { color:${b[a].glyph}; }
682.sc:nth-child(${o+1}) .sc-h { color:${b[a].head}; } .sc:nth-child(${o+1}) .sc-n { background:${b[a].chip}; color:${b[a].head}; }
683.sc:nth-child(${o+1}) li b { color:${b[a].head}; }`).join(`
684`)}
685.sc:nth-child(3) li b { text-decoration:line-through; text-decoration-color:#cbc7c1; text-decoration-thickness:1.5px; }
686</style></head><body>
687<div class="header"><p class="eyebrow">${Me}</p><h1 class="head">${Oe}</h1></div>
688<div class="scope">${_e.map(a=>`<div class="sc ${a.kind}">
689      <div class="sc-head"><span class="sc-ic"><span class="ms">${a.icon}</span></span><div class="sc-h">${a.head}</div></div>
690      <ul>${a.items.map(o=>`<li><b>${o.b}</b><span>${o.q}</span></li>`).join("")}</ul>
691    </div>`).join("")}</div>
692</body></html>`,x=(a,o)=>`<li><span class="si-ic"><span class="ms">${a}</span></span><span class="si-txt">${o}</span></li>`,Ue=a=>`
693.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; flex-direction:column; margin-top:30px;
694  opacity:0; animation:fadeUp .65s cubic-bezier(.16,1,.3,1) forwards .3s; }
695.board { flex:1; min-height:0; border:1px solid ${e.lborder}; border-radius:26px; overflow:hidden;
696  box-shadow:0 26px 64px rgba(7,64,26,.10), 0 2px 6px rgba(7,64,26,.04);
697  display:grid; grid-template-columns:.86fr 1.14fr; }
698.col { padding:46px 52px; display:flex; flex-direction:column; height:100%; }
699.col.price { background:${e.ltext}; }
700.col.setup { background:#fff; border-left:1px solid ${e.lborder}; }
701.col-name { flex:none; display:flex; align-items:center; gap:14px; font-weight:600; font-size:23px; letter-spacing:-.02em;
702  padding-bottom:18px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.14); }
703.col.price .col-name { color:#fff; }
704.col.price .col-name .ms { color:${e.lime}; font-size:30px; }
705.col.setup .col-name { color:${e.ltext}; border-bottom-color:${e.lborder}; }
706.col.setup .col-name .ms { color:${e.laccent}; font-size:30px; }
707.pblock { flex:1; display:flex; flex-direction:column; justify-content:center; gap:8px;
708  border-bottom:1px solid rgba(255,255,255,.14); }
709.pblock:last-of-type { border-bottom:none; }
710.pb-tag { font-family:'JetBrains Mono',monospace; font-size:14.5px; letter-spacing:.1em;
711  text-transform:uppercase; color:${e.lime}; }
712.pb-value { font-family:'Inter',sans-serif; font-weight:600; font-size:36px; letter-spacing:-.03em; color:#fff;
713  line-height:1.05; }
714.pb-value .unit { font-size:17px; font-weight:500; color:rgba(255,255,255,.6); margin-left:4px; }
715.pb-desc { font-size:18px; font-weight:400; color:rgba(255,255,255,.74); line-height:1.4; }
716.pb-desc b { color:${e.lime}; font-weight:600; }
717.col.setup ul { flex:1; list-style:none; display:grid; grid-template-columns:repeat(2,1fr);
718  grid-template-rows:repeat(${a},1fr); gap:14px; margin-top:14px; }
719.col.setup li { display:flex; align-items:center; gap:16px; padding:0 20px;
720  border-radius:16px; background:${e.lbg}; box-shadow:0 3px 10px rgba(7,64,26,.06); }
721.si-ic { width:48px; height:48px; flex-shrink:0; border-radius:12px; background:${e.laccent};
722  display:flex; align-items:center; justify-content:center; }
723.si-ic .ms { font-size:25px; color:#fff; }
724.si-txt { font-size:18.5px; font-weight:400; color:#2b2926; line-height:1.32; letter-spacing:-.01em; }
725.si-txt b { font-weight:700; color:${e.ltext}; }
726.premise { flex-shrink:0; margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:14px;
727  letter-spacing:.05em; color:${e.lmute};
727 opacity:0; animation:fadeIn .7s ease forwards .9s; }
728.premise b { color:${e.ltext}; font-weight:600; }
729`,Te=`
730.hero { flex:1; display:flex; flex-direction:column; justify-content:center; gap:18px; }
731.hero-tag { font-family:'JetBrains Mono',monospace; font-size:15px; letter-spacing:.12em;
732  text-transform:uppercase; color:${e.lime}; }
733.hero-val { font-family:'Inter',sans-serif; font-weight:600; font-size:92px; line-height:1;
734  letter-spacing:-.045em; color:#fff; }
735.hero-val .unit { font-size:28px; font-weight:500; color:rgba(255,255,255,.6); margin-left:8px;
736  letter-spacing:-.01em; }
737.hero-cap { font-size:21px; font-weight:400; color:rgba(255,255,255,.78); line-height:1.45; max-width:520px; }
738.hero-cap b { color:${e.lime}; font-weight:600; }
739.hero.second { border-top:1px solid rgba(255,255,255,.14); padding-top:30px; margin-top:30px; }
740.hero.second .hero-val { font-size:62px; }
741`,Ee=`
742body { display:flex; flex-direction:column; padding:44px 60px; position:relative; overflow:hidden; }
743.eyebrow { position:relative; z-index:1; margin-bottom:10px; }
744h1.head { position:relative; z-index:1; font-family:'Inter',sans-serif; font-weight:400;
745  font-size:clamp(38px,3.4vw,50px); line-height:1.08; letter-spacing:-.045em; color:${e.ltext}; max-width:1520px;
746  opacity:0; animation:fadeUp .7s ease forwards .15s; }
747h1.head .accent { color:${e.laccent}; }
748`,Re=[{n:"02",title:"Catálogo, PLP e PDP",desc:"Os templates que carregam o tráfego migram primeiro, e cada um é <b>medido antes e depois</b> de entrar no ar.",icon:"storefront"},{n:"03",title:"Regionalização e as 204 lojas",desc:"Region V2 e o sortimento por CEP continuam com <b>exatamente o mesmo comportamento</b>. O que muda é o custo que isso cobra da performance.",icon:"pin_drop"},{n:"04",title:"Carrinho, checkout e pós-compra",desc:"O checkout VTEX segue padrão e a <b>Lynx recebe os pedidos do mesmo jeito</b>. Muda a camada de apresentação, não o back nem a separação.",icon:"shopping_cart"},{n:"05",title:"Tagueamento preservado",desc:"98% das transações pagas de vocês vêm do Google. <b>Nenhum evento se perde</b> na troca: GA4 e mídia continuam lendo a mesma coisa.",icon:"sell"},{n:"06",title:"Controle total de SEO",desc:"Title, meta, canonical, schema, robots, sitemap e redirect deixam de ser o que o framework permite e viram <b>configuração de vocês</b>.",icon:"tune"}],Ie=(a,o)=>`
749  <div class="layer" style="animation-delay:${(.62-o*.08).toFixed(2)}s">
750    <span class="lnum">${a.n}</span>
751    <span class="lic"><span class="ms">${a.icon}</span></span>
752    <div class="ltxt">
753      <div class="ltitle">${a.title}</div>
754      <p class="ldesc">${a.desc}</p>
755    </div>
756  </div>`,Le=`<!DOCTYPE html><html><head>
757${c}
758<style>
759${s}
760${l}
761${n}
762${d}
763${m}
764body { display:flex; flex-direction:column; padding:50px 88px 40px; position:relative; overflow:hidden; }
765${r(e.laccent,"top:-260px; right:-180px;")}
766.header { position:relative; z-index:1; }
767h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(44px,4.2vw,60px); line-height:1.06;
768  letter-spacing:-.05em; color:${e.ltext}; max-width:1600px;
769  opacity:0; animation:fadeUp .7s ease forwards .15s; }
770h1.head .accent { color:${e.laccent}; }
771
772.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; gap:30px; margin-top:22px; }
773
774.rail { flex-shrink:0; width:150px; display:flex; flex-direction:column; align-items:center;
775  padding:6px 0 10px; opacity:0; animation:fadeIn .6s ease forwards .3s; }
776.rail .cap { font-family:'Inter',sans-serif; font-size:18px; font-weight:600; letter-spacing:.01em;
777  color:${e.ltext}; text-align:center; line-height:1.35; }
778.rail .cap.top { color:${e.laccent}; }
779.rail .line { flex:1; width:2px; margin:14px 0; position:relative;
780  background:linear-gradient(180deg, ${e.laccent}, ${e.lborder}); }
781.rail .line::before { content:""; position:absolute; top:-1px; left:50%; margin-left:-5px;
782  border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid ${e.laccent}; }
783
784.stack { flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
785
786.store { flex:1.35; background:${e.ltext}; border-radius:16px; padding:20px 26px; display:flex; align-items:center; gap:20px;
787  box-shadow:0 24px 54px rgba(7,64,26,.20), 0 2px 6px rgba(7,64,26,.08);
788  opacity:0; transform:translateY(-14px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards .72s; }
789.chrome { flex-shrink:0; width:150px; height:56px; border-radius:9px; background:rgba(255,255,255,.09);
790  border:1px solid rgba(255,255,255,.17); padding:8px 10px; display:flex; flex-direction:column; gap:7px; }
791.chrome .dots { display:flex; gap:4px; }
792.chrome .dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); display:block; }
793.chrome .bar { height:8px; border-radius:3px; background:rgba(255,255,255,.14); }
794.chrome .bar.w { width:70%; }
795.store-txt { flex:1; min-width:0; }
796.store-n { font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.14em;
797  text-transform:uppercase; color:${e.lime}; }
798.store-t { margin-top:5px; font-size:27px; font-weight:600; color:#fff; letter-spacing:-.025em; line-height:1.15; }
799.store-d { margin-top:5px; font-size:16.5px; font-weight:400; color:rgba(255,255,255,.68); line-height:1.4; }
800.store-d b { color:${e.lime}; font-weight:600; }
801/* Pílula com a URL do ambiente que já está no ar. */
802.store-url { margin-top:11px; display:inline-flex; align-items:center; gap:11px;
803  background:rgba(208,236,26,.12); border:1px solid rgba(208,236,26,.34); border-radius:999px;
804  padding:8px 18px 8px 12px; }
805.store-url .ms { font-size:19px; color:${e.lime}; }
806.store-url .u { font-family:'JetBrains Mono',monospace; font-size:15px; letter-spacing:-.01em; color:#fff; }
807.store-url .tagl { font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.14em;
808  text-transform:uppercase; color:${e.lime}; background:rgba(208,236,26,.16);
809  padding:3px 10px; border-radius:999px; }
810
811.layer { flex:1; background:#fff; border:1px solid ${e.lborder}; border-radius:14px; padding:16px 26px;
812  display:flex; align-items:center; gap:20px;
813  box-shadow:0 10px 26px rgba(7,64,26,.04);
814  opacity:0; transform:translateY(12px); animation:cardUp .5s cubic-bezier(.16,1,.3,1) forwards; }
815.lnum { flex-shrink:0; width:32px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
816  color:${e.lmute}; letter-spacing:.02em; }
817.lic { flex-shrink:0; width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
818.lic .ms { font-size:30px; color:${e.laccent}; }
819.ltxt { flex:1; min-width:0; display:flex; align-items:center; gap:20px; }
820.ltitle { flex-shrink:0; width:330px; font-size:21px; font-weight:600; color:${e.ltext};
821  letter-spacing:-.02em; line-height:1.3; }
822.ldesc { flex:1; min-width:0; font-size:19px; font-weight:400; color:${e.lbody}
822; line-height:1.45; }
823.ldesc b { color:${e.ltext}; font-weight:600; }
824
825/* Faixa de premissa de desenho. Barra âmbar à esquerda porque é condição de
826   escopo, não entrega: separa visualmente do que a pilha promete. */
827.scopenote { flex-shrink:0; margin-top:15px; display:flex; align-items:center; gap:20px;
828  background:#fff; border:1px solid ${e.lborder}; border-left:5px solid ${e.amber};
829  border-radius:16px; padding:17px 28px; box-shadow:0 2px 10px rgba(7,64,26,.05);
830  position:relative; z-index:1; opacity:0; animation:fadeUp .6s ease forwards .8s; }
831.sn-ic { width:46px; height:46px; flex-shrink:0; border-radius:12px; background:${e.amber};
832  display:flex; align-items:center; justify-content:center; }
833.sn-ic .ms { font-size:25px; color:#fff; }
834.sn-txt b { display:block; font-size:20px; font-weight:600; color:${e.ltext};
835  letter-spacing:-.02em; line-height:1.25; margin-bottom:4px; }
836.sn-txt span { display:block; font-size:18px; font-weight:400; color:${e.lbody}; line-height:1.4; }
837.sn-txt i { font-style:normal; font-weight:600; color:${e.ltext}; }
838</style></head><body>
839<div class="header">
840  <p class="eyebrow">1.1 · A migração · escopo</p>
841  <h1 class="head">A loja inteira em FastStore v4, <span class="accent">sem perder nada no caminho.</span></h1>
842</div>
843<div class="stage">
844  <div class="rail">
845    <span class="cap top">no ar<br>em FastStore v4</span>
846    <span class="line"></span>
847    <span class="cap">a fundação<br>que sustenta</span>
848  </div>
849  <div class="stack">
850    <div class="store">
851      <span class="chrome">
852        <span class="dots"><i></i><i></i><i></i></span>
853        <span class="bar w"></span><span class="bar"></span>
854      </span>
855      <div class="store-txt">
856        <div class="store-n">01 · a entrega</div>
857        <div class="store-t">O rihappy.com.br no ar, com <span style="color:${e.lime}">Core Web Vitals aprovados</span></div>
858        <div class="store-d">Não é meta, é <b>critério de aceite</b>: LCP, INP e CLS no verde do CrUX, em campo. Go-live por etapas, com rollback a um clique.</div>
859        <span class="store-url"><span class="ms">bolt</span><span class="u">rihappy.deco-cx.workers.dev</span><span class="tagl">já no ar</span></span>
860      </div>
861    </div>
862    ${Re.map((a,o)=>Ie(a,o)).join("")}
863  </div>
864</div>
865<div class="scopenote">
866  <span class="sn-ic"><span class="ms">design_services</span></span>
867  <div class="sn-txt">
868    <b>O desenho novo é o das telas que estiverem no Figma.</b>
869    <span>Todo o resto migra <i>as-is</i>, com o layout que já está no ar hoje. <i>Header e footer novos entram em todas as páginas</i>, inclusive nas que ficam as-is.</span>
870  </div>
871</div>
872</body></html>`,Be=[{nome:"Buybox",faz:"Vários sellers para o mesmo SKU na PDP: elege a melhor oferta e deixa comprar de qualquer um."},{nome:"CEP e regionalização",faz:"Regionaliza sellers, estoque e prazo por região. O preço não muda por região."},{nome:"Insider",faz:"CRM, personalização e mensageria: navegação, carrinho, compra e captura de lead."},{nome:"Kipiai",faz:"Pixel de dataLayer: publica os eventos de e-commerce para analytics e mídia."},{nome:"Gift Card",faz:"Só via Pix e comprado sozinho: avisa o cliente e limpa os outros itens do carrinho."},{nome:"Konfidency Reviews",faz:"Avaliações e notas dos produtos, com estrelas na PDP e nos cards."},{nome:"Cookies",faz:"Banner de consentimento de cookies, app próprio da Ri Happy."},{nome:"Social Selling",faz:"Venda assistida com código do vendedor. A barra fica no checkout, e a página /ss-redirect é da loja."},{nome:"Confi, OmniChat e Política Comercial 16",faz:"Selo de reputação, recuperação de carrinho e troca de política em 3P. Vivem no checkout, que não é alterado."}],Fe=(a,o)=>`
873  <tr style="animation-delay:${(.3+o*.04).toFixed(2)}s">
874    <td class="c-nome">${a.nome}</td>
875    <td class="c-faz">${a.faz}</td>
876    <td class="c-st"><span class="pill"><span class="ms">check</span>Validado</span></td>
877  </tr>`,He=`<!DOCTYPE html><html><head>
878${c}
879<style>
880${s}
881${l}
882${n}
883${d}
884${m}
885body { display:flex; flex-direction:column; padding:46px 72px 38px; position:relative; overflow:hidden; }
886${r(e.laccent,"top:-240px; right:-160px;")}
887.header { position:relative; z-index:1; }
888h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(38px,3.5vw,52px); line-height:1.06;
889  letter-spacing:-.045em; color:${e.ltext}; max-width:1640px;
890  opacity:0; animation:fadeUp .7s ease forwards .15s; }
891h1.head .accent { color:${e.laccent}; }
892.sub { margin-top:11px; font-size:20px; font-weight:300; color:${e.lbody}; max-width:1500px; line-height:1.4;
893  opacity:0; animation:fadeUp .7s ease forwards .25s; }
894.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; flex-direction:column; gap:13px; margin-top:20px; }
895.board { flex:1; min-height:0; background:#fff; border:1px solid ${e.lborder}; border-radius:22px;
896  padding:10px 34px 14px; overflow:hidden;
897  box-shadow:0 20px 50px rgba(7,64,26,.07), 0 2px 6px rgba(7,64,26,.04);
898  opacity:0; animation:fadeUp .65s cubic-bezier(.16,1,.3,1) forwards .25s; }
899table { width:100%; height:100%; border-collapse:collapse; table-layout:fixed; }
900thead th { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
901  color:${e.lmute}; text-align:left; font-weight:500; padding-bottom:10px; border-bottom:1px solid ${e.lborder}; }
902thead th.w1 { width:310px; } thead th.w3 { width:176px; text-align:right; }
903tbody tr { border-bottom:1px solid #f1efec; opacity:0; animation:fadeIn .5s ease forwards; }
904tbody tr:last-child { border-bottom:none; }
905td { padding:0 10px 0 0; vertical-align:middle; }
906.c-nome { font-size:23px; font-weight:600; color:${e.ltext}; letter-spacing:-.022em; line-height:1.2; }
907.c-faz { font-size:20px; font-weight:400; color:${e.lbody}; line-height:1.36; }
908.c-st { text-align:right; padding-right:0; }
909.pill { display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace;
910  font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
911  padding:8px 17px 8px 13px; border-radius:999px; white-space:nowrap;
912  background:color-mix(in srgb, ${e.laccent} 17%, transparent); color:#4d6410; }
913.pill .ms { font-size:17px; }
914.legend { flex-shrink:0; display:flex; align-items:center; gap:26px; padding:0 6px;
915  opacity:0; animation:fadeIn .7s ease forwards .8s; }
916.lg { display:flex; align-items:center; gap:9px; font-size:17px; color:${e.lbody}; }
917.lg .ms { font-size:19px; color:${e.laccent}; }
918.lg b { color:${e.ltext}; font-weight:600; }
919.src { flex-shrink:0; display:flex; align-items:center; gap:14px; background:${e.ltext}; border-radius:14px;
920  padding:15px 26px; opacity:0; animation:fadeUp .6s ease forwards .9s; }
921.src .ms { font-size:22px; color:${e.lime}; flex-shrink:0; }
922.src span { font-size:17.5px; font-weight:300; color:rgba(255,255,255,.8); line-height:1.35; }
923.src b { color:#fff; font-weight:600; }
924.src code { font-family:'JetBrains Mono',monospace; font-size:15.5px; color:${e.lime}; }
925</style></head><body>
926<div class="header">
927  <p class="eyebrow">1.2 · A migração · o que já foi validado</p>
928  <h1 class="head">As 11 customizações da loja, <span class="accent">todas validadas.</span></h1>
929  <p class="sub">Abrimos o repositório de vocês antes de fechar o escopo. Para cada customização já sabemos exatamente como a implementação tem que ser feita, e é por isso que o prazo de três semanas não é chute.</p>
930</div>
931<div class="stage">
932  <div class="board">
933    <table>
934      <thead><tr><th class="w1">Customização</th><th>O que faz</th><th class="w3">Status</th></tr></thead>
935      <tbody>${Be.map((a,o)=>Fe(a,o)).join("")}</tbody>
936    </table>
937  </div>
938  <div class="legend">
939    <span class="lg"><span class="ms">fact_check</span><b>As 11 lidas e validadas</b>, uma a uma</span>
940    <span class="lg"><span class="ms">swap_horiz</span><b>8 migram</b> para a FastStore</span>
941    <span class="lg"><span class="ms">lock</span><b>3 vivem no checkout</b> e não são alteradas</span>
942  </div>
943  <div class="src">
944    <span class="ms">folder_open</span>
945    <span>O mapa inteiro vive no repositório de vocês, em <code>customizacoes/</code>: uma página por customização, com caso de uso e comportamento esperado. <b>A fonte de verdade é o site atual em VTEX IO.</b></span>
946  </div>
947</div>
948</body></html>`,Ge=[{n:"01",icon:"swap_horiz",tema:"Paridade",pergunta:"A loja nova faz tudo que a de hoje faz?",itens:["As <b>11 customizações mapeadas</b> uma a uma, e nenhuma ficou incompatível com a FastStore","URLs, redirects e metadados vêm do catálogo, que não é alterado no projeto","<b>GA4, GTM e o dataLayer saem idênticos</b>, nos mesmos containers de produção","OMS, ERP, pagamento, antifraude, logística e marketplace não são tocados","Homologação ponta a ponta: compra, login, CEP, Buybox, Gift Card e LPs"]},{n:"02",icon:"shield",tema:"Segurança",pergunta:"O que protege a virada?",itens:["<b>Pentest antes do go-live</b>, com especialista de segurança no time","Auditoria de todos os componentes e endpoints, para não expor nada novo","Autenticação segue nas APIs da VTEX: contas, dados e segurança intactos","Modal de consentimento refeito, e a PII mascarada continua mascarada","Falha de segurança é tratada como <b>incidente</b>, em homologação ou produção"]},{n:"03",icon:"undo",tema:"Go-live",pergunta:"E se der errado no dia?",itens:["<b>Blue e green</b>: o site novo já está no ar em subdomínio antes de qualquer virada","A rampa sobe de 1% a 100% em um dia, com as métricas olhadas em tempo real","<b>O controle do percentual é nosso</b>: um proxy na frente da loja, sem depender de configuração da VTEX","Rollback imediato, devolvendo 100% do tráfego para o VTEX IO","Hypercare de uma semana, SLA de 1h útil e WhatsApp direto com a engenharia"]}],Ye=(a,o)=>`
949  <div class="pg" style="animation-delay:${(.3+o*.1).toFixed(2)}s">
950    <div class="pg-top">
951      <span class="pg-ic"><span class="ms">${a.icon}</span></span>
952      <span class="pg-n">${a.n}</span>
953    </div>
954    <div class="pg-tema">${a.tema}</div>
955    <p class="pg-pergunta">${a.pergunta}</p>
956    <ul>${a.itens.map(t=>`<li>${t}</li>`).join("")}</ul>
957  </div>`,Je=`<!DOCTYPE html><html><head>
958${c}
959<style>
960${s}
961${l}
962${n}
963${d}
964${m}
965body { display:flex; flex-direction:column; padding:46px 70px 38px; position:relative; overflow:hidden; }
966${r(e.laccent,"top:-240px; right:-160px;")}
967.header { position:relative; z-index:1; }
968h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(36px,3.3vw,50px); line-height:1.06;
969  letter-spacing:-.045em; color:${e.ltext}; opacity:0; animation:fadeUp .7s ease forwards .15s; }
970h1.head .accent { color:${e.laccent}; }
971.sub { margin-top:11px; font-size:20px; font-weight:300; color:${e.lbody}; max-width:1560px; line-height:1.4;
972  opacity:0; animation:fadeUp .7s ease forwards .25s; }
973.grid { flex:0 0 auto; margin:auto 0; position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr);
974  gap:22px; }
975.pg { min-width:0; background:#fff; border:1px solid ${e.lborder}; border-radius:22px; padding:30px 32px 28px;
976  display:flex; flex-direction:column; box-shadow:0 12px 30px rgba(7,64,26,.05);
977  opacity:0; transform:translateY(16px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards; }
978.pg-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
979.pg-ic { width:50px; height:50px; border-radius:13px; background:${e.ltext};
980  display:flex; align-items:center; justify-content:center; }
981.pg-ic .ms { font-size:26px; color:${e.lime}; }
982.pg-n { font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.12em; color:${e.lmute}; }
983.pg-tema { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
984  color:${e.laccent}; font-weight:600; }
985.pg-pergunta { margin-top:7px; font-size:26px; font-weight:600; color:${e.ltext}; letter-spacing:-.028em;
986  line-height:1.16; padding-bottom:18px; border-bottom:1px solid ${e.lborder}; }
987.pg ul { list-style:none; display:flex; flex-direction:column; gap:13px; padding-top:18px; }
988.pg li { position:relative; padding-left:26px; font-size:17.5px; font-weight:400; color:${e.lbody}; line-height:1.4; }
989.pg li::before { content:"check"; position:absolute; left:0; top:1px; font-family:'Material Symbols Sharp';
990  font-size:19px; font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 20; color:${e.laccent}; }
991.pg li b { color:${e.ltext}; font-weight:600; }
992.band { flex-shrink:0; margin-top:18px; display:flex; align-items:center; gap:15px; background:${e.ltext};
993  border-radius:15px; padding:17px 28px; position:relative; z-index:1;
994  opacity:0; animation:fadeUp .6s ease forwards .8s; }
995.band .ms { font-size:23px; color:${e.lime}; flex-shrink:0; }
996.band span { font-size:18.5px; font-weight:300; color:rgba(255,255,255,.84); line-height:1.35; }
997.band b { color:#fff; font-weight:600; }
998</style></head><body>
999<div class="header">
1000  <p class="eyebrow">1.3 · A migração · o que vocês perguntaram</p>
1001  <h1 class="head">As três perguntas <span class="accent">que decidem o projeto.</span></h1>
1002  <p class="sub">O documento de vocês tem oito blocos, e todos voltaram respondidos pergunta a pergunta. Estes três são os que mudam a decisão.</p>
1003</div>
1004<div class="grid">${Ge.map((a,o)=>Ye(a,o)).join("")}</div>
1005<div class="band">
1006  <span class="ms">description</span>
1007  <span>Escopo e prazo, ambiente de qualidade, integrações, SEO, performance e hypercare <b>também já estão respondidos no documento</b>, com o mesmo nível de detalhe.</span>
1008</div>
1009</body></html>`,Ve=`<!DOCTYPE html><html><head>
1010${c}
1011<style>
1012${s}
1013${l}
1014${n}
1015${d}
1016${m}
1017${Ee}
1018${r(e.laccent,"top:-260px; left:-180px;")}
1019${Ue(4)}
1020${Te}
1021/* Parcelas 50/50, coladas embaixo do valor na coluna verde. */
1022.split { flex-shrink:0; margin-top:26px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14);
1023  display:grid; grid-template-columns:1fr 1fr; gap:16px; }
1024.sp { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:14px;
1025  padding:18px 22px; display:flex; flex-direction:column; gap:5px; }
1026.sp-n { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.12em;
1027  text-transform:uppercase; color:${e.lime}; }
1028.sp-v { font-size:30px; font-weight:600; color:#fff; letter-spacing:-.03em; line-height:1.05; }
1029.sp-d { font-size:16px; font-weight:400; color:rgba(255,255,255,.7); line-height:1.3; }
1030</style></head><body>
1031<p class="eyebrow">1.4 · A migração · preço</p>
1032<h1 class="head">Escopo fechado, <span class="accent">
1032e tudo que entra nele.</span></h1>
1033<div class="stage">
1034  <div class="board">
1035    <div class="col price">
1036      <div class="col-name"><span class="ms">request_quote</span>Investimento</div>
1037      <div class="hero">
1038        <div class="hero-tag">Escopo fechado · 50/50</div>
1039        <div class="hero-val">R$ 130<span class="unit">mil</span></div>
1040        <p class="hero-cap">A loja inteira migrada, acelerada pelo <b>agent de migração</b>. Core Web Vitals aprovados como <b>critério de aceite</b>, não como promessa.</p>
1041      </div>
1042      <div class="split">
1043        <div class="sp"><span class="sp-n">1ª nota</span><span class="sp-v">R$ 65 mil</span><span class="sp-d">na assinatura, 45 dias para pagar</span></div>
1044        <div class="sp"><span class="sp-n">2ª nota</span><span class="sp-v">R$ 65 mil</span><span class="sp-d">30 dias depois, 45 dias para pagar</span></div>
1045      </div>
1046    </div>
1047    <div class="col setup">
1048      <div class="col-name"><span class="ms">inventory</span>O que está incluído</div>
1049      <ul>
1050        ${x("code","Desenvolvimento da loja inteira")}
1051        ${x("swap_horiz","Migração do conteúdo do CMS")}
1052        ${x("hub","Integrações de front")}
1053        ${x("task_alt","QA e homologação")}
1054        ${x("travel_explore","SEO técnico")}
1055        ${x("speed","Performance e Core Web Vitals")}
1056        ${x("rocket_launch","Go-live assistido")}
1057        ${x("health_and_safety","Uma semana de hypercare")}
1058      </ul>
1059    </div>
1060  </div>
1061  <p class="premise">Com 45 dias de prazo, as duas notas caem em <b>novembro e dezembro</b>, depois da Black Friday. Pressupõe <b>kickoff na segunda, 14 de setembro</b>, com repositório e conta VTEX já liberados, e que checkout, Lynx e Region V2 continuam como estão. O cronograma dia a dia está na parte 02.</p>
1062</div>
1063</body></html>`,Ne=[{n:"Semana 1",datas:"14 a 18 de setembro",titulo:"A deco sobe a loja",dep:"Sem dependência de vocês",depOn:!1,entrega:["Subdomínio de testes no ar: faststore.rihappy.com.br","Home, PLP, PDP, busca, carrinho e login navegáveis","As cinco customizações já portadas ligadas no ambiente","dataLayer e tracking no ar: Kipiai, Insider e os eventos no GTM"],precisa:["Subdomínio de testes configurado: faststore.rihappy.com.br","Um responsável nomeado para aprovações","30 minutos por dia na daily"],marco:"Sexta 18/09: loja entre 90% e 95%, no ar, com a lista aberta do que falta."},{n:"Semana 2",datas:"21 a 25 de setembro",titulo:"Homologação e treinamento",dep:"Depende do time da Ri Happy",depOn:!0,entrega:["Roteiro de homologação dia a dia, um bloco de customização por vez","Um dia dedicado a cada bloco de customização","Treinamento prático de CMS, 2 horas, gravado","Testes de venda ponta a ponta e pentest de segurança"],precisa:["Uma hora por dia na sessão de validação, de segunda a sexta","Quem aprova cada ponto na sala da sessão daquele dia","Time de conteúdo e de negócio no treinamento de quinta, 24/09","Call de infra com a VTEX"],marco:"Sexta 25/09: cenários validados, time treinado, janela do go-live fechada."},{n:"Semana 3",datas:"28 de setembro a 2 de outubro",titulo:"Go-live e hypercare",dep:"Depende de vocês e da VTEX",depOn:!0,entrega:["Go-live na segunda 28/09, num dia só: 1%, 20%, 50% e 100%","Métricas em tempo real em cada degrau","Rollback imediato pelo nosso proxy, sem depender de terceiro","Hypercare pela semana inteira, com SLA de 1h útil"],precisa:["GO ou NO-GO a cada degrau, pelo responsável nomeado","Acompanhamento de pedidos e conversão junto com a gente","VTEX acompanhando o dia, mesmo sem ser dependência da rampa"],marco:"Segunda 28/09: 100% do tráfego na FastStore no mesmo dia."}],Xe=(a,o)=>`
1064  <div class="wk${a.depOn?" dep":""}" style="animation-delay:${(.32+o*.1).toFixed(2)}s">
1065    <div class="wk-top">
1066      <span class="wk-n">${a.n}</span>
1067      <span class="wk-datas">${a.datas}</span>
1068      <div class="wk-titulo">${a.titulo}</div>
1069      <span class="wk-dep"><span class="ms">${a.depOn?"groups":"bolt"}</span>${a.dep}</span>
1070    </div>
1071    <div class="wk-bloco">
1072      <span class="wk-lbl">A deco entrega</span>
1073      <ul class="wk-list">${a.entrega.map(t=>`<li>${t}</li>`).join("")}</ul>
1074    </div>
1075    <div class="wk-bloco">
1076      <span class="wk-lbl need">Precisamos de vocês</span>
1077      <ul class="wk-list need">${a.precisa.map(t=>`<li>${t}</li>`).join("")}</ul>
1078    </div>
1079    <div class="wk-marco">${a.marco}</div>
1080  </div>`,We=`<!DOCTYPE html><html><head>
1081${c}
1082<style>
1083${s}
1084${l}
1085${n}
1086${d}
1087${m}
1088body { display:flex; flex-direction:column; padding:44px 66px 34px; position:relative; overflow:hidden; }
1089${r(e.laccent,"top:-240px; right:-160px;")}
1090.header { position:relative; z-index:1; }
1091h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(36px,3.3vw,50px); line-height:1.06;
1092  letter-spacing:-.045em; color:${e.ltext}; opacity:0; animation:fadeUp .7s ease forwards .15s; }
1093h1.head .accent { color:${e.laccent}; }
1094.marcos { display:flex; align-items:center; gap:12px; margin-top:13px; flex-wrap:wrap;
1095  opacity:0; animation:fadeUp .7s ease forwards .25s; }
1096.mk { display:flex; align-items:baseline; gap:9px; background:#fff; border:1px solid ${e.lborder};
1097  border-radius:999px; padding:8px 18px; box-shadow:0 1px 3px rgba(7,64,26,.05); }
1098.mk b { font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.06em; color:${e.laccent}; font-weight:600; }
1099.mk span { font-size:16px; font-weight:500; color:${e.ltext}; }
1100.mk-arrow { color:${e.lborder}; font-family:'JetBrains Mono',monospace; font-size:16px; }
1101.grid { flex:0 0 auto; margin:auto 0; position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr);
1102  gap:20px; }
1103.wk { min-width:0; background:#fff; border:1px solid ${e.lborder}; border-radius:20px; padding:26px 28px 24px;
1104  display:flex; flex-direction:column; box-shadow:0 12px 30px rgba(7,64,26,.05);
1105  opacity:0; transform:translateY(16px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards; }
1106.wk-top { flex-shrink:0; padding-bottom:16px; border-bottom:1px solid ${e.lborder}; }
1107.wk-n { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
1108  color:${e.laccent}; font-weight:600; }
1109.wk-datas { display:block; margin-top:4px; font-size:15.5px; color:${e.lmute}; }
1110.wk-titulo { margin-top:7px; font-size:27px; font-weight:600; color:${e.ltext}; letter-spacing:-.028em; line-height:1.14; }
1111.wk-dep { margin-top:13px; display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace;
1112  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
1113  padding:7px 14px; border-radius:999px;
1114  background:color-mix(in srgb, ${e.laccent} 16%, transparent); color:#4d6410; }
1115.wk-dep .ms { font-size:16px; }
1116.wk.dep .wk-dep { background:color-mix(in srgb, ${e.amber} 16%, transparent); color:#8a4d0b; }
1117.wk-bloco { flex:1; min-height:0; padding-top:15px; display:flex; flex-direction:column; }
1118.wk-lbl { font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
1119  color:${e.lmute}; margin-bottom:9px; }
1120.wk-lbl.need { color:${e.amber}; font-weight:600; }
1121.wk-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
1122.wk-list li { position:relative; padding-left:20px; font-size:16.5px; font-weight:400; color:${e.lbody}; line-height:1.34; }
1123.wk-list li::before { content:""; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%;
1124  background:${e.laccent}; }
1125.wk-list.need li::before { background:${e.amber}; }
1126.wk-marco { flex-shrink:0; margin-top:16px; background:${e.ltext}; border-radius:13px; padding:15px 19px;
1127  font-size:16.5px; font-weight:500; color:#fff; line-height:1.35; }
1128.agenda { flex-shrink:0; margin-top:16px; display:flex; align-items:center; gap:22px; background:#fff;
1129  border:1px solid ${e.lborder}; border-radius:16px; padding:16px 28px; position:relative; z-index:1;
1130  box-shadow:0 2px 10px rgba(7,64,26,.05); opacity:0; animation:fadeUp .6s ease forwards .85s; }
1131.agenda-lbl { flex-shrink:0; display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace;
1132  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:${e.ltext}; font-weight:600; }
1133.agenda-lbl .ms { font-size:21px; color:${e.laccent}; }
1134.agenda-itens { flex:1; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
1135.ag { display:flex; align-items:baseline; gap:8px; border:1px solid ${e.lborder}; background:${e.lbg};
1136  border-radius:999px; padding:8px 17px; }
1137.ag b { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.05em; color:${e.laccent}; font-weight:600; }
1138.ag span { font-size:15.5px; font-weight:500; color:${e.ltext}; }
1139</style></head><body>
1140<div class="header">
1141  <p class="eyebrow">2.1 · A implementação · visão geral</p>
1142  <h1 class="head">Três semanas, do código <span class="accent">
1142a 100% do tráfego.</span></h1>
1143  <div class="marcos">
1144    <span class="mk"><b>18/09</b><span>loja no ar em homologação</span></span>
1145    <span class="mk-arrow">→</span>
1146    <span class="mk"><b>25/09</b><span>homologação aprovada e time treinado</span></span>
1147    <span class="mk-arrow">→</span>
1148    <span class="mk"><b>28/09</b><span>100% do tráfego na FastStore</span></span>
1149  </div>
1150</div>
1151<div class="grid">${Ne.map((a,o)=>Xe(a,o)).join("")}</div>
1152<div class="agenda">
1153  <span class="agenda-lbl"><span class="ms">event</span>Travar agenda agora</span>
1154  <div class="agenda-itens">
1155    <span class="ag"><b>todo dia</b><span>daily de 30 min</span></span>
1156    <span class="ag"><b>qua 23/09</b><span>call de infra com a VTEX</span></span>
1157    <span class="ag"><b>qui 24/09</b><span>treinamento de CMS, 2 horas</span></span>
1158    <span class="ag"><b>seg 28/09</b><span>o go-live inteiro, num dia</span></span>
1159  </div>
1160</div>
1161</body></html>`,Qe={deco:"deco",rihappy:"Ri Happy",ambos:"Os dois",vtex:"com a VTEX"},y={deco:"#8CAA25",rihappy:"#D97A14",ambos:"#2AA9A0",vtex:"#4C6FFF"},Ke=["Segunda","Terça","Quarta","Quinta","Sexta"],Ze=(a,o)=>{if(!a)return`<div class="ag-cel vazia" style="animation-delay:${o}s"></div>`;const t=y[a.dono];return`
1162  <div class="ag-cel" style="animation-delay:${o}s;background:${t}14;border-top:3px solid ${t}">
1163    <div class="ag-t">${a.titulo}</div>
1164    ${a.nota?`<div class="ag-nota">${a.nota}</div>`:""}
1165    <div class="ag-dono" style="color:${t}">${Qe[a.dono]}</div>
1166  </div>`},ea=(a,o)=>`
1167  <div class="ag-label">${a.label}</div>
1168  ${a.cels.map((t,i)=>Ze(t,o+i*.03)).join("")}`,aa=a=>`
1169.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; flex-direction:column; gap:14px;
1170  margin-top:20px; }
1171.ag-grid { flex:1; min-height:0; border:1px solid ${e.lborder}; border-radius:20px; background:#fff;
1172  box-shadow:0 22px 54px rgba(7,64,26,.08), 0 2px 6px rgba(7,64,26,.04);
1173  padding:24px 28px; display:grid; grid-template-columns:118px repeat(5,1fr);
1174  grid-template-rows:auto ${a.map(o=>`${o}fr`).join(" ")}; gap:12px;
1175  opacity:0; animation:fadeUp .65s cubic-bezier(.16,1,.3,1) forwards .3s; }
1176.ag-dia { font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
1177  color:${e.ltext}; font-weight:600; text-align:center; display:flex; flex-direction:column; align-items:center;
1178  justify-content:center; gap:3px; }
1179.ag-dia i { font-style:normal; font-family:'Inter',sans-serif; font-size:19px; font-weight:600;
1180  letter-spacing:-.02em; color:${e.laccent}; }
1181.ag-label { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
1182  color:${e.lmute}; display:flex; align-items:center; line-height:1.5; }
1183.ag-cel { border-radius:12px; padding:13px 15px; display:flex; flex-direction:column; justify-content:center;
1184  gap:6px; box-shadow:0 1px 4px rgba(7,64,26,.05);
1185  opacity:0; transform:translateY(10px); animation:cardUp .5s cubic-bezier(.16,1,.3,1) forwards; }
1186.ag-cel.vazia { background:transparent; box-shadow:none; }
1187.ag-t { font-size:17px; font-weight:600; color:${e.ltext}; line-height:1.22; letter-spacing:-.015em; }
1188.ag-t b { color:${e.laccent}; }
1189.ag-nota { font-size:14.5px; font-weight:400; color:${e.lbody}; line-height:1.3; }
1190.ag-dono { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
1191  background:#fff; padding:4px 11px; border-radius:999px; align-self:flex-start; font-weight:600; }
1192.marco { flex-shrink:0; display:flex; align-items:center; gap:22px; background:${e.ltext}; border-radius:16px;
1193  padding:17px 30px; opacity:0; animation:fadeUp .6s ease forwards .8s; }
1194.marco-badge { flex-shrink:0; display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace;
1195  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:${e.limeDark}; background:${e.lime};
1196  padding:9px 17px; border-radius:999px; font-weight:600; }
1197.marco-badge .ms { font-size:17px; }
1198.marco-txt { flex:1; font-size:19px; font-weight:400; color:rgba(255,255,255,.86); line-height:1.35; }
1199.marco-txt b { color:#fff; font-weight:600; }
1200.legenda { flex-shrink:0; display:flex; align-items:center; gap:20px; padding:0 4px;
1201  opacity:0; animation:fadeIn .7s ease forwards .9s; }
1202.lg { display:flex; align-items:center; gap:8px; font-size:15px; color:${e.lbody}; }
1203.lg i { width:10px; height:10px; border-radius:3px; display:block; }
1204.oncall { margin-left:auto; display:flex; align-items:center; gap:10px; background:#fff;
1205  border:1px solid ${e.lborder}; border-radius:999px; padding:9px 20px;
1206  font-size:16px; color:${e.lbody}; box-shadow:0 1px 3px rgba(7,64,26,.05); }
1207.oncall .ms { font-size:19px; color:${e.laccent}; }
1208.oncall b { color:${e.ltext}; font-weight:600; }
1209`,oa=[{label:"9h00",peso:.42,cels:Array(5).fill({titulo:"Daily de 30 min",dono:"ambos"})},{label:"Manhã",cels:[{titulo:"Kickoff",nota:"escopo, responsáveis e o grupo aberto",dono:"ambos"},{titulo:"Home, PLP, PDP e busca",nota:"publicadas no subdomínio",dono:"deco"},{titulo:"Buybox e modal de CEP",nota:"ligados e verificados",dono:"deco"},{titulo:"dataLayer e tracking",nota:"Kipiai no ar, eventos batendo no GTM",dono:"deco"},{titulo:"Varredura de QA",nota:"manual e agente automatizado",dono:"deco"}]},{label:"Tarde",cels:[{titulo:"Ambiente e baseline",nota:"subdomínio no ar, números congelados",dono:"deco"},{titulo:"Catálogo, carrinho e login",nota:"integrações da VTEX conectadas",dono:"deco"},{titulo:"Cookies, Gift Card e reviews",nota:"as cinco portadas no ambiente",dono:"deco"},{titulo:"Insider e landing pages",nota:"personalização no ar, LPs com formulário",dono:"deco"},{titulo:"<b>A entrega grande</b>",nota:"link, lista aberta e roteiro da semana 2",dono:"ambos"}]}],ta=[{label:"Sessão de validação<br>1 hora, com vocês",cels:[{titulo:"Fluxo de compra inteiro",nota:"da home ao pedido: PLP, PDP, carrinho, login e checkout",dono:"ambos"},{titulo:"Modal de CEP",nota:"as regras de região, ponta a ponta",dono:"ambos"},{titulo:"Gift Card e reviews",nota:"split, prova social e cookies",dono:"ambos"},{titulo:"Insider, Kipiai e dataLayer",nota:"os eventos batendo no GTM",dono:"ambos"},{titulo:"Compras de teste",nota:"do banner ao pedido criado",dono:"ambos"}]},{label:"Tarde",cels:[{titulo:"Ajustes do fluxo",nota:"priorizados no mesmo dia",dono:"deco"},{titulo:"Buybox e sellers",nota:"preços e prazos por seller",dono:"ambos"},{titulo:"Proxy do rollout",nota:"o controle do percentual de pé, com a VTEX alinhada",dono:"vtex"},{titulo:"<b>Treinamento de CMS</b>",nota:"1 hora com o site no ar, gravado",dono:"rihappy"},{titulo:"Pentest e aceite",nota:"e a janela do go-live fechada",dono:"ambos"}]}],ia=["14/09","15/09","16/09","17/09","18/09"],sa=["21/09","22/09","23/09","24/09","25/09"],V=(a,o,t,i,p,f,S,j,T)=>`<!DOCTYPE html><html><head>
1210${c}
1211<style>
1212${s}
1213${l}
1214${n}
1215${d}
1216${m}
1217body { display:flex; flex-direction:column; padding:44px 66px 36px; position:relative; overflow:hidden; }
1218${j}
1219.header { position:relative; z-index:1; }
1220h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(36px,3.3vw,50px); line-height:1.06;
1221  letter-spacing:-.045em; color:${e.ltext}; opacity:0; animation:fadeUp .7s ease forwards .15s; }
1222h1.head .accent { color:${e.laccent}; }
1223.sub { margin-top:10px; font-size:19.5px; font-weight:300; color:${e.lbody}
1223; max-width:1620px; line-height:1.4;
1224  opacity:0; animation:fadeUp .7s ease forwards .25s; }
1225.sub b { color:${e.ltext}; font-weight:600; }
1226${aa(p.map(v=>v.peso??1))}
1227</style></head><body>
1228<div class="header">
1229  <p class="eyebrow">${a}</p>
1230  <h1 class="head">${o}</h1>
1231  <p class="sub">${t}</p>
1232</div>
1233<div class="stage">
1234  <div class="ag-grid">
1235    <div></div>
1236    ${Ke.map((v,q)=>`<div class="ag-dia">${v}<i>${i[q]}</i></div>`).join("")}
1237    ${p.map((v,q)=>ea(v,.4+q*.06)).join("")}
1238  </div>
1239  <div class="legenda">
1240    <span class="lg"><i style="background:${y.deco}"></i>deco conduz</span>
1241    <span class="lg"><i style="background:${y.ambos}"></i>os dois juntos</span>
1242    <span class="lg"><i style="background:${y.rihappy}"></i>time da Ri Happy</span>
1243    <span class="lg"><i style="background:${y.vtex}"></i>com a VTEX</span>
1244    ${T?`<span class="oncall"><span class="ms">support_agent</span>${T}</span>`:""}
1245  </div>
1246  <div class="marco">
1247    <span class="marco-badge"><span class="ms">flag</span>${f}</span>
1248    <span class="marco-txt">${S}</span>
1249  </div>
1250</div>
1251</body></html>`,na=V("2.2 · A implementação · semana 1",'Semana 1: <span class="accent">a deco sobe a loja.</span>',"14 a 18 de setembro. O único compromisso de vocês é a daily de 30 minutos: nenhuma entrega desta semana trava esperando validação.",ia,oa,"Sexta 18/09","Loja entre <b>90% e 95%</b>, no ar em <b>faststore.rihappy.com.br</b>, com a lista aberta do que falta e o roteiro de homologação na mão de vocês.",r(e.laccent,"top:-240p
1251x; right:-160px;")),ra=V("2.3 · A implementação · semana 2",'Semana 2: <span class="accent">homologação com o time de vocês.</span>',"21 a 25 de setembro. Tudo roda em <b>faststore.rihappy.com.br</b>, o ambiente que subiu na semana 1: é ele que vocês testam, é nele que a gente corrige, e é dele que sai o aceite. <b>Uma sessão de uma hora por dia</b>, e em cada uma a pessoa que aprova aquele ponto precisa estar na sala.",sa,ta,"Sexta 25/09","Homologação aprovada e janela do go-live marcada. Os critérios: <b>velocidade contra o baseline</b>, todos os fluxos customizados validados, time satisfeito com a usabilidade e <b>pentest sem achado crítico</b>.",r(e.amber,"bottom:-240px; left:-180px;"),"Fora das sessões, <b>on-call o dia inteiro</b>: o que o time de vocês achar testando é resolvido em tempo real."),la=[{hora:"Abertura",pct:"1%",altura:92,monitora:"Pedidos por hora contra o baseline, erro de JavaScript e de API, tempo de resposta",sobe:"Uma hora limpa, sem quebra no fluxo de compra"},{hora:"+2 horas",pct:"20%",altura:142,monitora:"Tudo acima, mais conversão e ticket médio",sobe:"Pedidos em linha com o baseline, sem incidente aberto"},{hora:"+4 horas",pct:"50%",altura:192,monitora:"Tudo acima, mais busca, login e Core Web Vitals de campo",sobe:"Métricas estáveis atravessando o horário de pico"},{hora:"+6 horas",pct:"100%",altura:242,monitora:"Tudo acima, mais indexação no Search Console e os eventos no GTM",sobe:"O dia fecha sem regressão de pedidos e o go-live está concluído"}],pa=(a,o)=>`
1252  <div class="dg" style="animation-delay:${(.32+o*.09).toFixed(2)}s">
1253    <div class="dg-bar" style="height:${a.altura}px">
1254      <span class="dg-pct">${a.pct}</span>
1255    </div>
1256    <div class="dg-txt">
1257      <span class="dg-hora">${a.hora}</span>
1258      <p class="dg-mon"><b>Em tempo real:</b> ${a.monitora}</p>
1259      <p class="dg-sobe"><b>Sobe se:</b> ${a.sobe}</p>
1260    </div>
1261  </div>`,da=`<!DOCTYPE html><html><head>
1262${c}
1263<style>
1264${s}
1265${l}
1266${n}
1267${d}
1268${m}
1269body { display:flex; flex-direction:column; padding:42px 60px 32px; position:relative; overflow:hidden; }
1270${r(e.laccent,"top:-240px; right:-160px;")}
1271.header { position:relative; z-index:1; }
1272h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(36px,3.3vw,50px); line-height:1.06;
1273  letter-spacing:-.045em; color:${e.ltext}; opacity:0; animation:fadeUp .7s ease forwards .15s; }
1274h1.head .accent { color:${e.laccent}; }
1275.sub { margin-top:10px; font-size:19.5px; font-weight:300; color:${e.lbody}; max-width:1620px; line-height:1.4;
1276  opacity:0; animation:fadeUp .7s ease forwards .25s; }
1277.sub b { color:${e.ltext}; font-weight:600; }
1278.rampa { flex:0 0 auto; position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr);
1279  gap:16px; margin:auto 0 0; align-items:end; }
1280.dg { min-width:0; display:flex; flex-direction:column; justify-content:flex-end;
1281  opacity:0; transform:translateY(16px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards; }
1282.dg-bar { flex-shrink:0; width:100%; background:linear-gradient(180deg, ${e.laccent}, #6f8a1c); border-radius:14px 14px 0 0;
1283  display:flex; align-items:flex-start; justify-content:center; padding-top:14px; }
1284.dg-pct { font-size:38px; font-weight:600; color:#fff; letter-spacing:-.04em; line-height:1; }
1285.dg-txt { flex-shrink:0; background:#fff; border:1px solid ${e.lborder}; border-top:none;
1286  border-radius:0 0 16px 16px; padding:17px 20px 19px; box-shadow:0 12px 30px rgba(7,64,26,.05); }
1287.dg-hora { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
1288  color:${e.ltext}; font-weight:600; }
1289.dg-mon { margin-top:10px; font-size:15.5px; font-weight:400; color:${e.lbody}; line-height:1.36; }
1290.dg-sobe { margin-top:8px; padding-top:8px; border-top:1px solid ${e.lborder};
1291  font-size:15.5px; font-weight:400; color:${e.lbody}; line-height:1.36; }
1292.dg-mon b, .dg-sobe b { color:${e.ltext}; font-weight:600; }
1293.caixas { flex:0 0 auto; margin:26px 0 auto; position:relative; z-index:1; display:grid;
1294  grid-template-columns:repeat(3,1fr); gap:18px; }
1295.cx { min-width:0; border-radius:18px; padding:22px 26px 20px; display:flex; flex-direction:column;
1296  opacity:0; transform:translateY(16px); animation:cardUp .6s cubic-bezier(.16,1,.3,1) forwards .72s; }
1297.cx.go { background:#fff; border:1px solid ${e.lborder}; box-shadow:0 12px 30px rgba(7,64,26,.05); }
1298.cx.rb { background:#fff; border:1px solid ${e.lborder}; border-left:5px solid ${e.amber};
1299  box-shadow:0 12px 30px rgba(7,64,26,.05); }
1300.cx.hc { background:${e.ltext}; }
1301.cx-top { display:flex; align-items:center; gap:11px; padding-bottom:13px; margin-bottom:13px;
1302  border-bottom:1px solid ${e.lborder}; }
1303.cx.hc .cx-top { border-bottom-color:rgba(255,255,255,.16); }
1304.cx-top .ms { font-size:23px; }
1305.cx.go .cx-top .ms { color:${e.laccent}; } .cx.rb .cx-top .ms { color:${e.amber}; } .cx.hc .cx-top .ms { color:${e.lime}; }
1306.cx-t { font-size:21px; font-weight:600; letter-spacing:-.022em; color:${e.ltext}; }
1307.cx.hc .cx-t { color:#fff; }
1308.cx ul { flex:1; list-style:none; display:flex; flex-direction:column; gap:7px; }
1309.cx li { position:relative; padding-left:17px; font-size:16px; font-weight:400; color:${e.lbody}; line-height:1.34; }
1310.cx li::before { content:""; position:absolute; left:1px; top:7px; width:5px; height:5px; border-radius:50%; background:${e.laccent}; }
1311.cx.rb li::before { background:${e.amber}; }
1312.cx.hc li { color:rgba(255,255,255,.82); } .cx.hc li::before { background:${e.lime}; }
1313.cx li b { color:${e.ltext}; font-weight:600; } .cx.hc li b { color:#fff; }
1314.cx-foot { flex-shrink:0; margin-top:12px; padding-top:11px; border-top:1px solid ${e.lborder};
1315  font-size:15px; font-weight:500; color:${e.ltext}; line-height:1.34; }
1316.cx.hc .cx-foot { border-top-color:rgba(255,255,255,.16); color:${e.lime}; }
1317</style></head><body>
1318<div class="header">
1319  <p class="eyebrow">2.4 · A implementação · o go-live</p>
1320  <h1 class="head">O go-live acontece <span class="accent">em um dia.</span></h1>
1321  <p class="sub">Segunda, 28 de setembro. A rampa sobe de 1% a 100% ao longo do mesmo dia, com as métricas olhadas <b>em tempo real</b>. <b>O controle do percentual é nosso</b>: um proxy na frente da loja decide quanto do tráfego vai para o site novo, sem depender de configuração da VTEX. O horário de abertura fica a combinar.</p>
1322</div>
1323<div class="rampa">${la.map((a,o)=>pa(a,o)).join("")}</div>
1324<div class="caixas">
1325  <div class="cx go">
1326    <div class="cx-top"><span class="ms">how_to_reg</span><span class="cx-t">GO ou NO-GO a cada degrau</span></div>
1327    <ul>
1328      <li>Pedidos por hora dentro do baseline</li>
1329      <li>Fluxo de compra completo funcionando</li>
1330      <li>Sem erro crítico em aberto</li>
1331      <li>Velocidade igual ou melhor que a da homologação</li>
1332    </ul>
1333    <div class="cx-foot">Quem decide é o responsável nomeado por vocês, com a deco e a VTEX na sala. Sem GO, o degrau segura onde está e o dia termina ali.</
1333div>
1334  </div>
1335  <div class="cx rb">
1336    <div class="cx-top"><span class="ms">undo</span><span class="cx-t">O que dispara rollback</span></div>
1337    <ul>
1338      <li>Fluxo de compra quebrado</li>
1339      <li>Queda clara em pedidos, com o limite numérico <b>a definir com vocês</b></li>
1340    </ul>
1341    <div class="cx-foot">O rollback é nosso e imediato: o proxy devolve 100% do tráfego para o VTEX IO, sem abrir ticket e sem esperar terceiro. O site novo continua de pé no subdomínio para investigarmos sem pressa.</div>
1342  </div>
1343  <div class="cx hc">
1344    <div class="cx-top"><span class="ms">health_and_safety</span><span class="cx-t">Hypercare</span></div>
1345    <ul>
1346      <li>Começa no dia seguinte e dura <b>uma semana cheia</b></li>
1347      <li><b>SLA de 1 hora útil</b></li>
1348      <li>WhatsApp direto entre a engenharia da deco e o time de vocês</li>
1349      <li>Conversão, pedidos, ticket médio e Core Web Vitals contra o baseline, todo dia</li>
1350    </ul>
1351    <div class="cx-foot">A gravação do treinamento e o código documentado em Markdown já ficam com vocês.</div>
1352  </div>
1353</div>
1354</body></html>`,ca=[{tl:"Out, nov e dez de 2026",tv:"R$ 70 mil / mês",tn:"Fixo. Sem variável, sem banco de horas e sem contagem de ticket. Atravessa Dia das Crianças, Black Friday e Natal com o mesmo time que migrou a loja."},{tl:"O que 2027 vai olhar",tv:"O resultado dos 90 dias",tn:"GMV, conversão e Core Web Vitals medidos antes e depois, no mesmo painel que vocês acompanham. É esse número que abre a negociação, em dezembro.",hl:!0},{tl:"A partir de janeiro",tv:"Modelo a combinar",tn:"Fixo, variável por meta, ou os dois. Nada fica travado agora, e nada é renovado no automático."}],ma=(a,o)=>`
1355  <div class="tot${a.hl?" hl":""}" style="animation-delay:${o}s">
1356    <span class="tl">${a.tl}</span>
1357    <span class="tv">${a.tv}</span>
1358    <span class="tn">${a.tn}</span>
1359  </div>`,fa=`<!DOCTYPE html><html><head>
1360${c}
1361<style>
1362${s}
1363* { margin:0; padding:0; box-sizing:border-box; }
1364body { font-family:'Inter',-apple-system,system-ui,sans-serif; width:100vw; height:100vh; overflow:hidden;
1365  background:${e.limeDark}; color:#fff; -webkit-font-smoothing:antialiased;
1366  padding:54px 88px 48px; display:flex; flex-direction:column; position:relative; }
1367${n}
1368${F}
1369.eyebrow2 { font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.2em; text-transform:uppercase;
1370  color:rgba(255,255,255,.5); margin-bottom:20px; opacity:0; animation:fadeDown .6s ease forwards .1s; }
1371h1.big { font-family:'Inter',sans-serif; font-weight:400; font-size:60px; line-height:1.06; letter-spacing:-.04em;
1372  color:#fff; opacity:0; animation:fadeUp .7s ease forwards .15s; }
1373h1.big .accent { color:${e.lime}; }
1374.sub2 { margin-top:13px; font-size:20px; font-weight:300; color:rgba(255,255,255,.62); max-width:1300px;
1375  line-height:1.4; opacity:0; animation:fadeUp .7s ease forwards .25s; }
1376.sub2 b { color:#fff; font-weight:600; }
1377
1378.totals { flex:1; min-height:0; margin-top:34px; display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:20px;
1379  align-items:stretch; }
1380.tot { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:20px;
1381  padding:40px 34px; display:flex; flex-direction:column; justify-content:center; gap:16px;
1382  opacity:0; transform:translateY(18px); animation:fadeUp .6s cubic-bezier(.16,1,.3,1) forwards; }
1383.tot .tl { font-family:'JetBrains Mono',monospace; font-size:15px; letter-spacing:.08em;
1384  text-transform:uppercase; color:rgba(255,255,255,.5); }
1385.tot .tv { font-size:36px; font-weight:600; color:#fff; letter-spacing:-.03em; line-height:1.15; }
1386.tot .tn { font-size:19px; font-weight:300; color:rgba(255,255,255,.82); line-height:1.4; }
1387.tot.hl { background:${e.lime}; border-color:${e.lime}; }
1388.tot.hl .tl { color:${e.limeDark}; opacity:.65; }
1389.tot.hl .tv { color:${e.limeDark}; font-size:38px; }
1390.tot.hl .tn { color:${e.limeDark}; opacity:.85; }
1391
1392.foot { flex-shrink:0; margin-top:26px; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:20px;
1393  opacity:0; animation:fadeUp .6s ease forwards .95s; }
1394.fcard { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:16px;
1395  padding:20px 24px; display:flex; align-items:center; gap:16px; }
1396.fcard .ms { font-size:30px; color:${e.lime}; flex-shrink:0; }
1397.fcard .ft { font-size:19.5px; font-weight:300; color:rgba(255,255,255,.82); line-height:1.35; }
1398.fcard .ft b { color:#fff; font-weight:600; }
1399</style></head><body>
1400<p class="eyebrow2">3.5 · Depois do go-live · a conta</p>
1401<h1 class="big">R$ 70 mil por mês até dezembro. <span class="accent">2027 se negocia no resultado.</span></h1>
1402<p class="sub2">
1402Três meses fechados para atravessar a sazonalidade com quem construiu a loja, e a conversa do ano que vem apoiada em número medido, não em estimativa.</p>
1403<div class="totals">
1404  ${ca.map((a,o)=>ma(a,.4+o*.1)).join("")}
1405</div>
1406<div class="foot">
1407  <div class="fcard">
1408    <span class="ms">calculate</span>
1409    <span class="ft"><b>R$ 210 mil pelos três meses, fechados.</b> Sem fee de projeto por cima e sem fatura extra por onda estratégica.</span>
1410  </div>
1411  <div class="fcard">
1412    <span class="ms">all_inclusive</span>
1413    <span class="ft"><b>Créditos de AI, seats no Studio e monitoramento 24/7 já inclusos.</b> Sem cobrança à parte.</span>
1414  </div>
1415  <div class="fcard">
1416    <span class="ms">lock_open</span>
1417    <span class="ft"><b>Sem lock-in.</b> O código é de vocês e fica no repositório de vocês, do primeiro commit ao último.</span>
1418  </div>
1419</div>
1420</body></html>`,xa=[1580,1680,1780,1880].flatMap((a,o)=>Array.from({length:12},(t,i)=>D($[(o*2+i)%$.length],a,-40+i*100,u[(o+i+1)%u.length],.25+o*.05+i*.03))).join(""),ga=`<!DOCTYPE html><html><head>
1421${c}
1422<style>
1423${s}
1424${l}
1425${n}
1426${P}
1427body { position:relative; background:#f9f6f2; display:flex; flex-direction:column; justify-content:center; padding:0 86px; }
1428.eyebrow { font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.22em; text-transform:uppercase;
1429  color:${e.laccent}; margin-bottom:32px; opacity:0; animation:fadeDown .7s ease forwards .15s; position:relative; z-index:1; }
1430.headline { position:relative; z-index:1; width:1260px;
1431  font-family:'Inter',sans-serif; font-weight:400; font-size:88px; line-height:1.04; letter-spacing:-.05em; color:${e.ltext};
1432  opacity:0; animation:fadeUp .9s ease forwards .3s; }
1433.headline .accent { color:${e.laccent}; }
1434.sub { position:relative; z-index:1; margin-top:26px; width:1040px; font-size:27px; font-weight:300; color:#5d5751; line-height:1.35;
1435  opacity:0; animation:fadeUp .8s ease forwards .55s; }
1436.urlbar { position:relative; z-index:1; margin-top:34px; display:inline-flex; align-items:center; gap:18px;
1437  background:${e.ltext}; border-radius:999px; padding:16px 30px 16px 22px; width:fit-content;
1438  box-shadow:0 20px 44px rgba(7,64,26,.20);
1439  opacity:0; animation:fadeUp .8s ease forwards .7s; }
1440.urlbar .ms { font-family:'Material Symbols Sharp'; font-size:26px; color:${e.lime}; line-height:1;
1441  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 40; }
1442.urlbar .u { font-family:'JetBrains Mono',monospace; font-size:26px; letter-spacing:-.01em; color:#fff; }
1443.urlbar .tagl { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.16em;
1444  text-transform:uppercase; color:${e.limeDark}; background:${e.lime}; padding:6px 14px; border-radius:999px; }
1445.footer-row { position:absolute; left:86px; right:640px; bottom:74px;
1446  display:flex; align-items:center; justify-content:space-between; gap:40px; }
1447.deco-logo { width:210px; height:auto;
1448  opacity:0; animation:fadeUp .8s ease forwards .8s; }
1449.contact { text-align:right;
1450  font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.1em; line-height:1.9; color:${e.lmute};
1451  opacity:0; animation:fadeUp .8s ease forwards .9s; }
1452.contact b { color:${e.ltext}; font-weight:600; }
1453</style></head><body>
1454  ${xa}
1455  <p class="eyebrow">Ri Happy &lt;&gt; deco</p>
1456  <h1 class="headline">A primeira versão já está no ar.<br><span class="accent">Falta combinar o kickoff.</span></h1>
1457  <p class="sub">Home, categoria, marca e produto já navegam em FastStore v4, com o catálogo de vocês. Kickoff na segunda 14/09, loja em homologação na sexta 18/09, e o go-live inteiro na segunda 28/09. R$ 130 mil em duas notas de R$ 65 mil com 45 dias de prazo, e R$ 70 mil por mês até dezembro.</p>
1458  <div class="urlbar"><span class="ms">bolt</span><span class="u">rihappy.deco-cx.workers.dev</span><span class="tagl">abra agora</span></div>
1459  <div class="footer-row">
1460    <img class="deco-logo" src="${A}" alt="deco">
1461    <div class="contact"><span>Migração · Operação · Sustentação</span><br><b>decocms.com</b></div>
1462  </div>
1463</body></html>`,ha={id:"rihappy_2026",title:"Ri Happy × deco · Implementação e sustentação",slides:[{id:"01_cover",html:ee,label:"Capa"},{id:"02_agenda",html:ae,label:"O que vamos ver"},{id:"03_divider_migracao",html:ie,label:"Parte 01 · A migração"},{id:"04_escopo_migracao",html:Le,label:"A loja em FastStore v4"},{id:"05_arquitetura",html:He,label:"As 11 customizações"},{id:"06_perguntas",html:Je,label:"As três perguntas que decidem"},{id:"07_preco",html:Ve,label:"Preço"},{id:"09_divider_implementacao",html:se,label:"Parte 02 · A implementação"},{id:"10_tres_semanas",html:We,label:"As três semanas"},{id:"11_semana_1",html:na,label:"Semana 1, em agenda"},{id:"12_semana_2",html:ra,label:"Semana 2, em agenda"},{id:"13_golive",html:da,label:"O go-live em um dia"},{id:"14_time_rituais",html:he,label:"O time e os rituais"}
1463,{id:"15_divider_operacao",html:ne,label:"Parte 03 · Depois do go-live"},{id:"16_agentes",html:ge,label:"O time de agentes"},{id:"17_processo",html:re,label:"O processo, ponta a ponta"},{id:"18_seis_agencias",html:Ce,label:"Seis agências em um contrato"},{id:"19_escopo",html:Pe,label:"Perímetro do escopo"},{id:"20_sustentacao",html:fa,label:"A conta até dezembro"},{id:"21_close",html:ga,label:"Fechamento"}]},ba="f38ef9909c74a846863c83d23d4eae2c4d1dae6342b8c17d3df2ce3b687fba10";function wa(){const a=N.c(1);let o;return a[0]===Symbol.for("react.memo_cache_sentinel")?(o=C.jsxs(X,{deckId:"rihappy",title:"Ri Happy × deco",eyebrow:"Proposta comercial",subtitle:"Esta proposta é protegida por senha.",helpText:"Entre em contato com a deco para obter acesso.",passwordHash:ba,children:[C.jsx("style",{dangerouslySetInnerHTML:{__html:W}}),C.jsx(Q,{deck:ha,pdfUrl:null})]}),a[0]=o):o=a[0],o}export{wa as component};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.