@font-face{font-family:Montserrat;src:url('assets/Montserrat-Regular.ttf') format('truetype');font-display:swap}
:root{font-family:Montserrat,system-ui,sans-serif;color:#f5f4fa;background:#0b0f1a;font-synthesis:weight}
*{box-sizing:border-box}body{margin:0}header{width:min(1120px,calc(100% - 48px));margin:auto;display:flex;justify-content:space-between;gap:24px;padding:24px 0;border-bottom:1px solid #ffffff18;font-size:12px;color:#b5b4c8}a{color:inherit;text-decoration:none}a:hover{color:#a3a3f9}main{width:min(1040px,calc(100% - 48px));margin:auto;padding:44px 0 28px;text-align:center}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:.15em;color:#b9b7ff;margin:0 0 18px}h1{font-size:clamp(30px,4vw,48px);line-height:1.18;letter-spacing:-.035em;margin:0;font-weight:400}h1 em{color:#a3a3f9;font-style:normal}.lead{font-size:14px;color:#b5b4c8;line-height:1.8;margin:20px 0 20px}.demo{width:100%;margin:auto}.scene{width:100%;height:auto;display:block;overflow:visible;font-family:Montserrat,sans-serif}.caption{height:28px;position:relative;font-size:15px;font-weight:600;margin-top:6px}.caption span{position:absolute;inset:0;display:grid;place-items:center}.journey{display:grid;grid-template-columns:repeat(3,1fr);position:relative;gap:20px;margin:26px auto 0;max-width:740px;padding-bottom:20px;font-size:11px;color:#b5b4c8}.progress-track{position:absolute;bottom:0;left:0;width:100%;height:3px;border-radius:3px;background:#28263e;overflow:hidden}.progress-fill{display:block;width:100%;height:100%;background:#8484ff;transform-origin:left;transform:scaleX(0)}.controls{display:flex;justify-content:center;gap:12px;margin:24px 0 16px}button{font:inherit;font-size:12px;color:#eeeaff;border:1px solid #625e7e;background:#1b1a30;padding:12px 18px;border-radius:6px;min-height:44px;cursor:pointer}button:hover{background:#2c2947}button:focus-visible,a:focus-visible{outline:3px solid #a3a3f9;outline-offset:4px}button:disabled{opacity:.45;cursor:default}.note{color:#9794ae;font-size:10px;line-height:1.8;max-width:630px;margin:0 auto}.paper{transform-box:view-box;transform-origin:480px 286px}.sheet-main{--start:translate(-34px,3px) rotate(-7deg);transform:var(--start)}.sheet-back{--start:translate(8px,-4px) rotate(8deg);transform:var(--start)}.sheet-note{--start:translate(14px,10px) rotate(-9deg);transform:var(--start)}.conversion{transform-origin:480px 286px;opacity:0}.system{opacity:0;transform-origin:480px 286px}.dashboard-title,.dashboard-cards,.dashboard-table,.dashboard-chart{opacity:0}.chart-bars{transform-origin:0 456px;transform:scaleY(0)}.caption-merge,.caption-system{opacity:0}
.running .paper{animation:paper-to-system 7s ease-in-out both}.running .sheet-back{animation-name:paper-back}.running .sheet-note{animation-name:paper-note}.running .conversion{animation:conversion 7s ease-in-out both}.running .system{animation:system 7s ease-in-out both}.running .dashboard-title{animation:assemble-title 7s ease-out both}.running .dashboard-cards{animation:assemble-cards 7s ease-out both}.running .dashboard-table{animation:assemble-table 7s ease-out both}.running .dashboard-chart{animation:assemble-chart 7s ease-out both}.running .chart-bars{animation:bars 7s ease-out both}.running .caption-manual{animation:caption-manual 7s linear both}.running .caption-merge{animation:caption-merge 7s linear both}.running .caption-system{animation:caption-system 7s linear both}.running .progress-fill{animation:progress 7s linear both}
.paused *{animation-play-state:paused!important}
/* Ciclo de 13 s: planilhas paradas por quase 1 s, transformação a 0,75× da versão de 5,7 s e, com o sistema pronto, o fecho com o boneco (de 6,9 s a 12,8 s). */
@keyframes paper-to-system{0%,7.4%{opacity:1;transform:var(--start)}16.7%{opacity:1;transform:translate(0,0) rotate(0)}28.4%,97.2%{opacity:0;transform:translate(54px,-14px) rotate(0) scale(.12)}100%{opacity:1;transform:var(--start)}}
@keyframes paper-back{0%,7.4%{opacity:1;transform:var(--start)}16.7%{opacity:.7;transform:translate(-142px,43px) rotate(0)}28.4%,97.2%{opacity:0;transform:translate(-120px,32px) scale(.12)}100%{opacity:1;transform:var(--start)}}
@keyframes paper-note{0%,7.4%{opacity:1;transform:var(--start)}16.7%{opacity:.7;transform:translate(-190px,-60px) rotate(0)}28.4%,97.2%{opacity:0;transform:translate(-120px,-50px) scale(.12)}100%{opacity:1;transform:var(--start)}}
@keyframes conversion{0%,15%{opacity:0;transform:scale(.4)}22.6%,27.2%{opacity:1;transform:scale(1)}34.3%,100%{opacity:0;transform:scale(1.2)}}
@keyframes system{0%,25.5%{opacity:0;transform:scale(.82)}37.2%,95.6%{opacity:1;transform:scale(1)}98.1%,100%{opacity:0;transform:scale(.95)}}
@keyframes assemble-title{0%,28.4%{opacity:0;transform:translateY(14px)}39.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes assemble-cards{0%,30.7%{opacity:0;transform:translateY(24px)}41.9%,100%{opacity:1;transform:translateY(0)}}
@keyframes assemble-table{0%,33.1%{opacity:0;transform:translateY(24px)}44.2%,100%{opacity:1;transform:translateY(0)}}
@keyframes assemble-chart{0%,34.3%{opacity:0;transform:translateY(24px)}45.4%,100%{opacity:1;transform:translateY(0)}}
@keyframes bars{0%,40.1%{transform:scaleY(0)}53%,100%{transform:scaleY(1)}}
@keyframes caption-manual{0%,8.5%{opacity:1}15%,100%{opacity:0}}
@keyframes caption-merge{0%,9.7%{opacity:0}15.5%,28.4%{opacity:1}35.4%,100%{opacity:0}}
@keyframes caption-system{0%,31.9%{opacity:0}40.1%,100%{opacity:1}}
@keyframes progress{0%{transform:scaleX(0)}16.7%{transform:scaleX(.33)}31.9%{transform:scaleX(.66)}53%,100%{transform:scaleX(1)}}
.still .paper,.still .conversion,.still .caption-manual,.still .caption-merge{opacity:0;animation:none}.still .system,.still .dashboard-title,.still .dashboard-cards,.still .dashboard-table,.still .dashboard-chart,.still .caption-system{opacity:1;transform:none;animation:none}.still .chart-bars{transform:scaleY(1);animation:none}.still .progress-fill{transform:scaleX(1);animation:none}
@media(max-width:600px){header{width:calc(100% - 32px);font-size:10px;padding:18px 0;gap:16px}main{width:calc(100% - 24px);padding-top:34px}h1{font-size:30px}.eyebrow{font-size:8px;letter-spacing:.1em}.lead{font-size:12px;padding:0 12px}.lead br{display:none}.caption{font-size:12px;margin-top:12px}.journey{gap:8px;font-size:9px;line-height:1.6;margin-top:19px}.note{padding:0 16px}.controls{gap:10px}button{padding-inline:14px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.running *{animation:none!important}.paper,.conversion,.caption-manual,.caption-merge{opacity:0}.system,.dashboard-title,.dashboard-cards,.dashboard-table,.dashboard-chart,.caption-system{opacity:1;transform:none}.chart-bars{transform:scaleY(1)}.progress-fill{transform:scaleX(1)}}
.animation-brand{width:44px;height:auto;align-self:center}header{align-items:center}
/* Revisão 08: sequência de 13 s (ver o comentário dos keyframes). */
.running .paper,.running .conversion,.running .system,.running .dashboard-title,.running .dashboard-cards,.running .dashboard-table,.running .dashboard-chart,.running .chart-bars,.running .caption-manual,.running .caption-merge,.running .caption-system,.running .progress-fill{animation-duration:13s}
.running .paper,.running .conversion,.running .system,.running .dashboard-title,.running .dashboard-cards,.running .dashboard-table,.running .dashboard-chart,.running .chart-bars,.running .caption-manual,.running .caption-merge,.running .caption-system,.running .progress-fill{animation-iteration-count:infinite}
.offscreen-paused *,.document-paused *{animation-play-state:paused!important}
.embed{background:#0b0f1a;overflow:hidden}.embed header,.embed .eyebrow,.embed h1,.embed .lead,.embed .caption,.embed .journey,.embed .controls,.embed .note{display:none}.embed main{width:100%;padding:0}
/* Revisão 08: fecho. Com o sistema pronto, a tela esmaece, o boneco sobe, acena e "fala" os três ganhos em sequência. Tempos em % do ciclo de 13 s. */
.pitch-dim,.pitch-balloon,.pitch-item,.mouth-talk{opacity:0}
.presenter{transform:translateY(250px)}
.pitch-balloon{transform-origin:724px 352px}
.wave{transform-origin:902px 420px}
.mouth-talk,.p-eye{transform-box:fill-box;transform-origin:center}
.running .pitch-dim{animation:pitch-dim 13s ease-in-out infinite}
.running .presenter{animation:presenter 13s ease-out infinite}
.running .wave{animation:wave 13s ease-in-out infinite}
.running .pitch-balloon{animation:pitch-balloon 13s cubic-bezier(.2,.9,.3,1.2) infinite}
.running .item-1{animation:item-1 13s ease-out infinite}
.running .item-2{animation:item-2 13s ease-out infinite}
.running .item-3{animation:item-3 13s ease-out infinite}
.running .mouth-talk{animation:mouth-talk 13s linear infinite,talk .18s ease-in-out infinite alternate}
.running .mouth-smile{animation:mouth-smile 13s linear infinite}
.running .p-eye{animation:p-blink 3.7s infinite}
@keyframes pitch-dim{0%,53.1%{opacity:0}55.8%,95.6%{opacity:.74}98.1%,100%{opacity:0}}
@keyframes presenter{0%,53.8%{transform:translateY(250px)}57.3%{transform:translateY(-6px)}58.5%,95.6%{transform:translateY(0)}98.5%,100%{transform:translateY(250px)}}
@keyframes wave{0%,57.3%{transform:rotate(0)}58.8%{transform:rotate(-14deg)}60.4%{transform:rotate(10deg)}61.9%{transform:rotate(-14deg)}63.5%,63.8%{transform:rotate(0)}65.4%{transform:rotate(-8deg)}66.9%,70.8%{transform:rotate(0)}72.3%{transform:rotate(-8deg)}73.8%,77.7%{transform:rotate(0)}79.2%{transform:rotate(-8deg)}80.8%,100%{transform:rotate(0)}}
@keyframes pitch-balloon{0%,58.5%{opacity:0;transform:scale(.85)}61.2%,95.6%{opacity:1;transform:scale(1)}98.1%,100%{opacity:0;transform:scale(.95)}}
@keyframes item-1{0%,63.8%{opacity:0;transform:translateX(-14px)}66.5%,100%{opacity:1;transform:none}}
@keyframes item-2{0%,70.8%{opacity:0;transform:translateX(-14px)}73.5%,100%{opacity:1;transform:none}}
@keyframes item-3{0%,77.7%{opacity:0;transform:translateX(-14px)}80.4%,100%{opacity:1;transform:none}}
@keyframes mouth-talk{0%,60.8%{opacity:0}61.2%,82.7%{opacity:1}83.1%,100%{opacity:0}}
@keyframes mouth-smile{0%,60.8%{opacity:1}61.2%,82.7%{opacity:0}83.1%,100%{opacity:1}}
@keyframes talk{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@keyframes p-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.still .pitch-dim{opacity:.74;animation:none}.still .presenter{transform:none;animation:none}.still .pitch-balloon,.still .pitch-item{opacity:1;transform:none;animation:none}.still .mouth-talk{opacity:0;animation:none}
@media(prefers-reduced-motion:reduce){.pitch-dim{opacity:.74}.presenter,.pitch-balloon,.pitch-item{transform:none}.pitch-balloon,.pitch-item{opacity:1}.mouth-talk{opacity:0}}