/* Mockups conceituais (marcas fictícias). Tudo dimensionado em cqi para escalar no hero e na galeria. */
.mk{position:relative;container-type:inline-size;width:100%;max-width:540px;aspect-ratio:1/1.02;justify-self:end;margin:0;border-radius:36px;overflow:hidden;isolation:isolate;background:linear-gradient(150deg,#2c2c2e,#1d1d1f);box-shadow:0 50px 90px -50px rgba(0,0,0,.7);font-family:var(--body);color:var(--ink)}
.mk--light{background:linear-gradient(150deg,#ffffff,#ececf0)}
.mk--gold{background:linear-gradient(150deg,#d1d1d6,#1d1d1f)}
.mk>canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.8;z-index:-1}
.mk__cap{position:absolute;left:4.5cqi;bottom:4cqi;right:4.5cqi;display:flex;justify-content:space-between;gap:2cqi;font:700 2.1cqi/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,253,249,.6);z-index:5}
.mk--light .mk__cap,.mk--gold .mk__cap{color:rgba(23,21,18,.55)}

/* primitives */
.mk-win{position:absolute;background:#ffffff;border-radius:2.6cqi;overflow:hidden;box-shadow:0 4cqi 8cqi -3cqi rgba(0,0,0,.45)}
.mk-win__bar{display:flex;align-items:center;gap:1cqi;padding:1.8cqi 2.2cqi;background:#f5f5f7;border-bottom:1px solid #d2d2d7}
.mk-win__bar i{width:1.4cqi;height:1.4cqi;border-radius:50%;background:#c7c7cc}
.mk-win__bar span{flex:1;margin-left:2cqi;height:3cqi;border-radius:9cqi;background:#ffffff;font:600 1.7cqi/3cqi var(--body);color:#8e8e93;padding-left:2cqi;white-space:nowrap;overflow:hidden}
.mk-phone{position:absolute;aspect-ratio:9/19;background:#ffffff;border:1.1cqi solid #0b0b0c;border-radius:6cqi;overflow:hidden;box-shadow:0 4cqi 8cqi -3cqi rgba(0,0,0,.5)}
.mk-phone::before{content:"";position:absolute;top:1.2cqi;left:50%;width:30%;height:2.4cqi;border-radius:9cqi;background:#0b0b0c;transform:translateX(-50%);z-index:3}
.mk-card{position:absolute;background:#ffffff;border-radius:2.4cqi;padding:2.6cqi;box-shadow:0 3cqi 7cqi -3cqi rgba(0,0,0,.4)}
.mk-l{display:block;height:1.5cqi;border-radius:2cqi;background:#d2d2d7}
.mk-l.d{background:#1d1d1f}.mk-l.g{background:#8e8e93}.mk-l.s{background:#f2f2f7}.mk-l.w{background:rgba(255,253,249,.25)}
.mk-btn{display:inline-flex;align-items:center;justify-content:center;padding:1.5cqi 3cqi;border-radius:1.4cqi;background:#1d1d1f;color:#1d1d1f;font:700 1.8cqi/1 var(--body);white-space:nowrap}
.mk-ph{border-radius:1.6cqi;background:linear-gradient(140deg,#e8e8ed,#8e8e93 55%,#48484a)}
.mk-ph.alt{background:linear-gradient(160deg,#3a3a3c,#1d1d1f)}
.mk-ph.soft{background:linear-gradient(140deg,#f5f5f7,#d2d2d7)}
.mk-t{font-family:var(--head);font-weight:600;letter-spacing:-.04em;line-height:1.05}
.mk-chip{position:absolute;display:flex;align-items:center;gap:1.4cqi;padding:1.6cqi 2.4cqi;border-radius:9cqi;background:#ffffff;font:700 1.9cqi/1 var(--body);box-shadow:0 2cqi 5cqi -2cqi rgba(0,0,0,.35);white-space:nowrap}
.mk-chip b{width:1.6cqi;height:1.6cqi;border-radius:50%;background:#1d1d1f}

/* shared motion (paused off-screen, off for reduced motion) */
@keyframes mk-float{50%{transform:translateY(-2.2cqi)}}
@keyframes mk-scroll{0%,12%{transform:translateY(0)}50%,62%{transform:translateY(var(--mk-scroll,-40%))}100%{transform:translateY(0)}}
@keyframes mk-pulse{50%{transform:scale(1.08);opacity:.8}}
@keyframes mk-in{0%,8%{opacity:0;transform:translateY(2cqi)}18%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mk-grow{0%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
.mk-float{animation:mk-float 6s ease-in-out infinite}
.mk-float.late{animation-delay:-3s}
.mk:not(.is-live) *,.mk:not(.is-live) *::before,.mk:not(.is-live) *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.mk *,.mk *::before,.mk *::after{animation:none!important}}

/* home gallery */
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:min(420px,82vw);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 24px;scrollbar-width:none;cursor:grab}
.gallery::-webkit-scrollbar{display:none}
.gallery.is-drag{cursor:grabbing;scroll-snap-type:none}
.gal{scroll-snap-align:start;text-decoration:none;display:flex;flex-direction:column;gap:16px}
.gal .mk{max-width:none;border-radius:var(--r-lg);transition:transform .6s var(--ease)}
.gal:hover .mk{transform:scale(.98)}
.gal h3{font-size:20px}
.gal p{font-size:13px;color:var(--ink-3);margin-top:4px}
.gal__tag{display:inline-block;margin-top:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);font:700 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:900px){.shero .mk{justify-self:start}}

.mk-btn{color:#fff}

/* ───────── criação de aplicativos · hero SVG 400x408: dois celulares flutuando, aviso que desce, ponto pulsando, botão em destaque.
   Só transform/opacity. Pausa fora da tela e sem movimento com prefers-reduced-motion: ver _base.css (.mk *). */
.mk-ap{position:absolute;inset:0;width:100%;height:100%;display:block}
.mk-ap-h{font-family:var(--head);letter-spacing:-.02em}
.mk-ap-a-ping,.mk-ap-a-brilho,.mk-ap-a-botao{transform-box:fill-box;transform-origin:center}

.mk-ap-a-flutua{animation:mk-ap-flutua 6s ease-in-out infinite}
.mk-ap-a-flutua.mk-ap-tarde{animation-delay:-3s}
.mk-ap-a-ping{opacity:0;animation:mk-ap-ping 2.4s ease-out infinite}
.mk-ap-a-brilho{opacity:0;animation:mk-ap-brilho 3.6s ease-in-out infinite}
.mk-ap-a-botao{animation:mk-ap-toque 3.6s ease-in-out infinite}
.mk-ap-a-aviso{animation:mk-ap-aviso 8s ease infinite}
.mk-ap-a-anel{animation:mk-ap-anel 1.6s .5s ease-out both}

@keyframes mk-ap-flutua{50%{transform:translateY(-4px)}}
@keyframes mk-ap-ping{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(var(--e,2.6))}}
@keyframes mk-ap-brilho{0%,100%{opacity:0;transform:scale(1)}40%{opacity:.35}80%{opacity:0;transform:scale(1.08,1.4)}}
@keyframes mk-ap-toque{0%,35%,60%,100%{transform:scale(1)}47%{transform:scale(.97)}}
@keyframes mk-ap-aviso{0%,8%{opacity:0;transform:translateY(-16px)}18%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-16px)}}
@keyframes mk-ap-anel{from{stroke-dasharray:0 100}to{stroke-dasharray:75 100}}

/* ───────── visualização arquitetônica · Estúdio Linha Arquitetura: a planta técnica dá lugar ao render do mesmo ambiente */
.mk-ar-ba{left:7%;top:10%;width:86%;height:70%;padding:0;overflow:hidden}
.mk-ar-plan,.mk-ar-render{position:absolute;inset:0}
.mk-ar-plan{display:grid;place-items:center;background-color:#f8f7f3;background-image:linear-gradient(rgba(29,29,31,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(29,29,31,.045) 1px,transparent 1px);background-size:4cqi 4cqi}
.mk-ar-plan svg{width:88%;height:auto;max-height:92%;overflow:visible}
.mk-ar-plan .w{fill:#1d1d1f}
.mk-ar-plan .g{fill:#f8f7f3}
.mk-ar-plan .t{fill:none;stroke:#1d1d1f;stroke-width:.25}
.mk-ar-plan .d{fill:none;stroke:#86868b;stroke-width:.35;stroke-dasharray:1 .8}
.mk-ar-plan .dl{fill:none;stroke:#1d1d1f;stroke-width:.7;stroke-linecap:round}
.mk-ar-plan .rug{fill:rgba(160,139,52,.07);stroke:rgba(160,139,52,.45);stroke-width:.3;stroke-dasharray:1.2 .8}
.mk-ar-plan .f{fill:rgba(160,139,52,.07);stroke:#A08B34;stroke-width:.5}
.mk-ar-plan .f .ff{fill:rgba(160,139,52,.2);stroke-width:.35}
.mk-ar-plan .pl{fill:rgba(111,154,90,.3);stroke:#6f9a5a;stroke-width:.4}
.mk-ar-plan .lb text{font:700 2.1px/1 var(--body,sans-serif);letter-spacing:.35px;fill:#1d1d1f}
.mk-ar-plan .ar text{font:500 1.8px/1 var(--body,sans-serif);fill:#86868b}
.mk-ar-plan .dm{font:600 2px/1 var(--body,sans-serif);fill:#1d1d1f;paint-order:stroke;stroke:#f8f7f3;stroke-width:1.4px}
.mk-ar-render{clip-path:inset(0 0 0 50%);animation:mk-ar-wipe 8s ease-in-out infinite;background:linear-gradient(180deg,#efe6d6,#e2d3b8);overflow:hidden}
.mk-ar-render>*{position:absolute}
.mk-ar-wall{inset:0 0 33% 0;background:radial-gradient(70% 90% at 78% 30%,rgba(255,244,214,.95),rgba(255,244,214,0) 70%),linear-gradient(180deg,#f4ede1,#e7dbc6)}
.mk-ar-cove{left:0;right:0;top:0;height:7%;background:linear-gradient(180deg,rgba(255,226,170,.65),rgba(255,226,170,0));box-shadow:0 .4cqi 1.6cqi rgba(255,214,140,.35)}
.mk-ar-art{left:12%;top:15%;width:20%;height:24%}
.mk-ar-art i{position:absolute;background:linear-gradient(135deg,#d8c7a4,#b9a47a);border:.6cqi solid #fff;box-shadow:0 .6cqi 1.4cqi rgba(70,50,20,.2)}
.mk-ar-art i:first-child{left:0;top:0;width:60%;height:100%}
.mk-ar-art i:last-child{right:0;top:22%;width:32%;height:56%;background:linear-gradient(135deg,#8fa58f,#5f7a64)}
.mk-ar-window{right:9%;top:10%;width:30%;height:44%;border:1.1cqi solid #fff;background:linear-gradient(180deg,#a9cbe0 0%,#d4e7f1 55%,#eef5f8 100%);box-shadow:0 0 5cqi rgba(255,238,196,.9),inset 0 0 2cqi rgba(255,255,255,.5)}
.mk-ar-window i{position:absolute;left:50%;top:0;bottom:0;width:.9cqi;margin-left:-.45cqi;background:#fff}
.mk-ar-window b{position:absolute;left:0;right:0;top:52%;height:.9cqi;background:#fff}
.mk-ar-curtain{right:36%;top:6%;width:7%;height:50%;background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,.35));border-radius:.6cqi;box-shadow:.6cqi 0 1.6cqi rgba(120,100,60,.15)}
.mk-ar-floor{left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 40%),repeating-linear-gradient(90deg,#b88b5a 0 8.5cqi,#a97d4f 8.5cqi 17cqi)}
.mk-ar-skirt{left:0;right:0;bottom:33.4%;height:1.6%;background:#fbf8f1;box-shadow:0 .4cqi .8cqi rgba(70,50,20,.18)}
.mk-ar-sun{right:2%;top:50%;width:56%;height:36%;background:linear-gradient(200deg,rgba(255,238,196,.8),rgba(255,238,196,0) 72%);clip-path:polygon(72% 0,100% 0,62% 100%,0 100%);mix-blend-mode:soft-light;animation:mk-ar-sun 8s ease-in-out infinite}
.mk-ar-rug{left:8%;bottom:5%;width:58%;height:15%;border-radius:50%;background:radial-gradient(ellipse at center,#e3d8c4 0 55%,#d6c7ab 56% 62%,#e3d8c4 63%);box-shadow:0 .8cqi 2cqi rgba(70,50,20,.18)}
.mk-ar-sofa{left:11%;bottom:17%;width:42%;height:19%;border-radius:2.4cqi 2.4cqi 1cqi 1cqi;background:linear-gradient(180deg,#5f7d6b,#41584a);box-shadow:0 2.4cqi 3cqi -1cqi rgba(0,0,0,.4),inset 0 .8cqi 1.2cqi rgba(255,255,255,.16)}
.mk-ar-sofa::before{content:"";position:absolute;left:-2.4%;bottom:0;width:7%;height:78%;border-radius:1.6cqi;background:linear-gradient(180deg,#527060,#384e41)}
.mk-ar-sofa::after{content:"";position:absolute;right:-2.4%;bottom:0;width:7%;height:78%;border-radius:1.6cqi;background:linear-gradient(180deg,#527060,#384e41)}
.mk-ar-sofa i{position:absolute;bottom:14%;width:26%;height:52%;border-radius:1.6cqi;background:linear-gradient(180deg,#6f8f7b,#4d6a58);box-shadow:inset 0 .6cqi .8cqi rgba(255,255,255,.14)}
.mk-ar-sofa i:nth-child(1){left:8%}.mk-ar-sofa i:nth-child(2){left:37%}.mk-ar-sofa i:nth-child(3){left:66%}
.mk-ar-table{left:34%;bottom:9%;width:17%;height:5%;border-radius:1cqi;background:linear-gradient(180deg,#f1ece2,#d9cfba);box-shadow:0 1.4cqi 1.8cqi -.4cqi rgba(0,0,0,.3)}
.mk-ar-lamp{left:30%;top:0;width:11%;height:21%}
.mk-ar-lamp::before{content:"";position:absolute;left:50%;top:0;width:.3cqi;height:55%;margin-left:-.15cqi;background:#2a2a2c}
.mk-ar-lamp::after{content:"";position:absolute;left:12%;right:12%;bottom:14%;height:34%;border-radius:50% 50% 12% 12%/90% 90% 12% 12%;background:linear-gradient(180deg,#d9b46a,#b88a3a);box-shadow:0 1.6cqi 4cqi rgba(255,214,140,.75)}
.mk-ar-plant{left:57%;bottom:21%;width:11%;height:30%}
.mk-ar-plant::before{content:"";position:absolute;left:28%;right:28%;bottom:0;height:30%;border-radius:.8cqi .8cqi 1.4cqi 1.4cqi;background:linear-gradient(180deg,#f2ede3,#cfc4ad);box-shadow:0 1cqi 1.4cqi rgba(0,0,0,.2)}
.mk-ar-plant i{position:absolute;bottom:26%;width:46%;height:62%;border-radius:50% 50% 8% 8%;background:radial-gradient(circle at 50% 30%,#7fa968,#3e6a35 72%)}
.mk-ar-plant i:nth-child(1){left:2%;transform:rotate(-22deg)}.mk-ar-plant i:nth-child(2){left:27%;height:78%}.mk-ar-plant i:nth-child(3){right:2%;transform:rotate(22deg)}
.mk-ar-vig{inset:0;background:radial-gradient(120% 100% at 50% 40%,rgba(0,0,0,0) 55%,rgba(40,25,10,.22))}
.mk-ar-line{position:absolute;top:0;bottom:0;left:50%;width:.5cqi;margin-left:-.25cqi;background:#fff;animation:mk-ar-line 8s ease-in-out infinite;box-shadow:0 0 2cqi rgba(0,0,0,.25)}
.mk-ar-line b{position:absolute;left:50%;top:50%;width:5cqi;height:5cqi;margin:-2.5cqi 0 0 -2.5cqi;border-radius:50%;background:#fff;box-shadow:0 1cqi 2cqi rgba(0,0,0,.3)}
.mk-ar-tag{position:absolute;top:3cqi;padding:1cqi 1.8cqi;border-radius:9cqi;background:rgba(255,255,255,.92);font:700 1.4cqi/1 var(--body);color:#1d1d1f;letter-spacing:.02em;box-shadow:0 .4cqi 1.2cqi rgba(0,0,0,.1)}
.mk-ar-tag.a{left:3cqi}.mk-ar-tag.b{right:3cqi}
.mk-ar-chip{left:8%;bottom:8%;animation:mk-st-toast 7s ease infinite}
@keyframes mk-ar-wipe{0%,10%{clip-path:inset(0 0 0 78%)}45%,60%{clip-path:inset(0 0 0 22%)}100%{clip-path:inset(0 0 0 78%)}}
@keyframes mk-ar-line{0%,10%{left:78%}45%,60%{left:22%}100%{left:78%}}
@keyframes mk-ar-sun{0%,100%{opacity:.6;transform:translateX(0)}50%{opacity:1;transform:translateX(-4%)}}
@media (prefers-reduced-motion:reduce){.mk-ar-render{clip-path:inset(0 0 0 50%)}.mk-ar-line{left:50%}.mk-ar-sun{animation:none}}

/* ───────── design editorial · hero: poster estático + livro three.js (assets/js/hero-editorial.js) por cima */
.mk-ed3d{position:absolute;inset:0;background:#ebe5dc;touch-action:pan-y}
.mk-ed3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease}
.mk-ed3d .mk-foto{transition:opacity .9s ease}
.mk-ed3d.is-3d canvas{opacity:1}
.mk-ed3d.is-3d .mk-foto{opacity:0}

/* ───────── embalagens e rótulos · Lume Cosméticos */
.mk-pk-box{position:absolute;left:12%;top:16%;width:30%;aspect-ratio:3/4;transform:perspective(60cqi) rotateY(-18deg) rotateX(4deg);transform-style:preserve-3d}
.mk-pk-front{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:1cqi;padding:3cqi;background:linear-gradient(160deg,#f6efe4,#e8d9bf);border-radius:1cqi;box-shadow:0 4cqi 9cqi -3cqi rgba(0,0,0,.35)}
.mk-pk-front small{font:700 1.5cqi/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#7a6519}
.mk-pk-front .mk-t{font-size:3cqi;color:#1d1d1f}
.mk-pk-front span{font:500 1.4cqi/1.2 var(--body);color:#6e6e73}
.mk-pk-front i{position:absolute;left:20%;top:14%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f8c98a,#e08a3c 70%);opacity:.85}
.mk-pk-side{position:absolute;top:0;bottom:0;left:100%;width:22%;background:#dcc8a4;transform-origin:0 50%;transform:rotateY(70deg)}
.mk-pk-top{position:absolute;left:0;right:0;bottom:100%;height:22%;background:#efe3cc;transform-origin:50% 100%;transform:rotateX(70deg)}
.mk-pk-bottle{position:absolute;left:48%;top:28%;width:12%;display:grid;justify-items:center}
.mk-pk-cap{width:60%;height:5cqi;border-radius:.8cqi .8cqi 0 0;background:#1d1d1f}
.mk-pk-body{width:100%;aspect-ratio:1/2;border-radius:1.4cqi;background:linear-gradient(90deg,#f6a964,#e08a3c);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.6cqi;color:#fff;box-shadow:0 3cqi 6cqi -2cqi rgba(0,0,0,.35)}
.mk-pk-body small{font:700 1.1cqi/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.mk-pk-body b{font:600 1.8cqi/1 var(--head)}
.mk-pk-die{right:6%;bottom:12%;width:32%;display:grid;gap:1.4cqi}
.mk-pk-die svg{width:100%}
.mk-pk-die .cut{fill:#faf6ee;stroke:#1d1d1f;stroke-width:.9}
.mk-pk-die .fold{fill:none;stroke:#B49A45;stroke-width:.7;stroke-dasharray:2 1.6;animation:sa-flowline 1.6s linear infinite}
.mk-pk-die small{font:700 1.3cqi/1 var(--body);color:#2F6B3A}

/* ───────── registro de marcas · Casa Ipê Café */
.mk-rm-cert{left:7%;top:12%;width:48%;display:grid;gap:1.6cqi;padding:3.4cqi;background:linear-gradient(180deg,#fff,#faf7ef);border:1px solid #e9dfc3}
.mk-rm-cert small{font:700 1.3cqi/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#7a6519}
.mk-rm-cert .mk-t{font-size:3.4cqi}
.mk-rm-seal{position:absolute;right:3cqi;top:3cqi;width:8cqi;height:8cqi;border-radius:50%;background:linear-gradient(135deg,#EFE2B4,#A08B34);display:grid;place-items:center;animation:mk-pulse 3s ease-in-out infinite}
.mk-rm-seal span{font:700 3.6cqi/1 var(--head);color:#1d1d1f}
.mk-rm-rows{display:grid;gap:1cqi;margin-top:1cqi}
.mk-rm-rows span{display:flex;justify-content:space-between;padding:1.2cqi 1.6cqi;border-radius:1cqi;background:#f5f1e6;font:600 1.6cqi/1 var(--body);color:#1d1d1f}
.mk-rm-rows em{font-style:normal;color:#6e6e73;font-weight:500}
.mk-rm-track{right:6%;top:30%;width:38%;display:grid;gap:1.4cqi}
.mk-rm-track .mk-t{font-size:2.4cqi;margin-bottom:.4cqi}
.mk-rm-track div{display:flex;align-items:center;gap:1.4cqi;font:500 1.6cqi/1.2 var(--body);color:#1d1d1f}
.mk-rm-track i{flex:none;width:2.6cqi;height:2.6cqi;border-radius:50%;background:#e3e3e8;animation:mk-rm-step 7s ease infinite}
.mk-rm-track div:nth-of-type(2) i{animation-delay:.7s}.mk-rm-track div:nth-of-type(3) i{animation-delay:1.4s}.mk-rm-track div:nth-of-type(4) i{animation-delay:2.1s}.mk-rm-track div:nth-of-type(5) i{animation-delay:2.8s;animation-name:mk-rm-step-gold}
@keyframes mk-rm-step{0%,8%{background:#e3e3e8}14%,88%{background:#1d1d1f}100%{background:#e3e3e8}}
@keyframes mk-rm-step-gold{0%,8%{background:#e3e3e8}14%,88%{background:#B49A45}100%{background:#e3e3e8}}
.mk-rm-chip{left:8%;bottom:9%;animation:mk-st-toast 7s ease infinite}
@media (prefers-reduced-motion:reduce){.mk-rm-track i{background:#1d1d1f}}

/* criacao-de-sites · Aurora Odontologia (fictícia) */
.mk-ex-win{left:7%;top:9%;width:80%;height:70%}
.mk-ex-view{position:relative;height:calc(100% - 6.6cqi);overflow:hidden}
.mk-ex-page{--mk-scroll:-38%;padding:3cqi;display:grid;gap:3cqi;animation:mk-scroll 9s cubic-bezier(.65,0,.35,1) infinite}
.mk-ex-nav{display:flex;align-items:center;gap:3cqi}
.mk-ex-nav b{font-size:2.6cqi;margin-right:auto}
.mk-ex-nav .mk-btn{padding:1.1cqi 2cqi;font-size:1.5cqi}
.mk-ex-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:3cqi;align-items:center}
.mk-ex-h{font-size:3.9cqi}
.mk-ex-hero .mk-ph{aspect-ratio:4/5}
.mk-ex-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqi}
.mk-ex-row .mk-ph{aspect-ratio:1}
.mk-ex-band{display:grid;gap:1.4cqi;padding:3cqi;border-radius:1.6cqi;background:#1d1d1f}
.mk-ex-phone{right:6%;bottom:9%;width:25%}
.mk-ex-mob{padding:5cqi 2cqi 2cqi;display:grid;gap:1.6cqi}
.mk-ex-mob b{font-size:2cqi}
.mk-ex-mob p{font-size:2.3cqi}
.mk-ex-mob .mk-ph{aspect-ratio:1}
.mk-ex-mob .mk-btn{font-size:1.4cqi;padding:1.2cqi}
.mk-ex-chip{left:4%;bottom:18%}

/* foto e vídeo · mockups conceituais (marcas fictícias) */

/* edicao-de-video · Maré Filmes */
.mk-fv-ed{left:6%;top:8%;width:68%;height:62%}
.mk-fv-ed__body{display:grid;grid-template-rows:1fr auto;gap:2cqi;padding:2.4cqi;height:calc(100% - 6.6cqi);background:#1F1C18}
.mk-fv-ed__prev{position:relative;border-radius:1.4cqi;background:radial-gradient(circle at 70% 30%,#8e8e93,#5E4F1E 60%,#1d1d1f)}
.mk-fv-play{position:absolute;left:50%;top:50%;width:7cqi;height:7cqi;border-radius:50%;background:rgba(255,253,249,.85);transform:translate(-50%,-50%)}
.mk-fv-play::after{content:"";position:absolute;left:2.8cqi;top:2cqi;border-left:2.2cqi solid #1d1d1f;border-top:1.5cqi solid transparent;border-bottom:1.5cqi solid transparent}
.mk-fv-tc{position:absolute;right:1.6cqi;bottom:1.4cqi;font:700 1.6cqi/1 var(--body);color:rgba(255,253,249,.8);letter-spacing:.06em}
.mk-fv-tl{position:relative;display:grid;gap:1cqi}
.mk-fv-ruler{display:flex;justify-content:space-between;height:1.4cqi}
.mk-fv-tick{width:1px;background:rgba(255,253,249,.25)}
.mk-fv-track{position:relative;height:3.6cqi;border-radius:.8cqi;background:rgba(255,253,249,.06)}
.mk-fv-track b{position:absolute;top:0;bottom:0;border-radius:.8cqi;background:linear-gradient(180deg,#8e8e93,#1d1d1f);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.mk-fv-track b.alt{background:linear-gradient(180deg,#636366,#48484a)}
.mk-fv-track.t2 b{background:linear-gradient(180deg,#6e6e73,#3a3a3c)}
.mk-fv-wave{display:flex;align-items:center;gap:.4cqi;height:4cqi;padding:0 .6cqi;border-radius:.8cqi;background:rgba(194,174,102,.12)}
.mk-fv-wave i{flex:1;border-radius:1cqi;background:#8e8e93;opacity:.75}
.mk-fv-head{position:absolute;top:-.6cqi;bottom:-.4cqi;left:8%;width:.35cqi;background:#ffffff;border-radius:1cqi;animation:mk-fv-head 7s linear infinite}
.mk-fv-head::before{content:"";position:absolute;left:50%;top:0;width:1.8cqi;height:1.8cqi;border-radius:.4cqi;background:#ffffff;transform:translate(-50%,-30%) rotate(45deg)}
@keyframes mk-fv-head{from{left:4%}to{left:94%}}
.mk-fv-reel{right:7%;top:14%;width:26%;background:#1d1d1f}
.mk-fv-reel__img{position:absolute;inset:0;background:radial-gradient(circle at 40% 30%,#e8e8ed,#1d1d1f 45%,#2c2c2e 85%)}
.mk-fv-cap{position:absolute;left:8%;right:8%;bottom:22%;text-align:center;font:800 2.5cqi/1.15 var(--head);color:#ffffff;text-shadow:0 .3cqi 1cqi rgba(0,0,0,.5)}
.mk-fv-cap span{animation:mk-fv-word 5s infinite}
.mk-fv-cap span:nth-child(2){animation-delay:.6s}.mk-fv-cap span:nth-child(3){animation-delay:1.2s}.mk-fv-cap span:nth-child(4){animation-delay:1.8s}.mk-fv-cap span:nth-child(5){animation-delay:2.4s}
@keyframes mk-fv-word{0%,10%{color:#ffffff}14%,24%{color:#d1d1d6}28%,100%{color:#ffffff}}
.mk-fv-reel__ui{position:absolute;right:6%;bottom:8%;display:grid;gap:1.4cqi}
.mk-fv-reel__ui i{width:3cqi;height:3cqi;border-radius:50%;background:rgba(255,253,249,.7)}
.mk-fv-ed__chip{left:5%;top:74%}

/* captacao-de-foto-e-video · Casa Jambu Café */
.mk-fv-vf{position:absolute;left:6%;top:7%;width:88%;height:66%;border-radius:2.6cqi;overflow:hidden;box-shadow:0 4cqi 8cqi -3cqi rgba(0,0,0,.4)}
.mk-fv-vf__scene{position:absolute;inset:0;background:radial-gradient(circle at 30% 70%,#e8e8ed 0,#8e8e93 25%,#6E5A22 55%,#2c2c2e 90%);animation:mk-fv-pan 12s ease-in-out infinite alternate}
@keyframes mk-fv-pan{to{transform:scale(1.08) translateX(-2%)}}
.mk-fv-cup{position:absolute;left:30%;top:48%;width:16cqi;height:12cqi;border-radius:0 0 7cqi 7cqi;background:linear-gradient(180deg,#ffffff,#d2d2d7);box-shadow:0 2cqi 3cqi rgba(0,0,0,.35)}
.mk-fv-cup::after{content:"";position:absolute;right:-4cqi;top:2cqi;width:4.5cqi;height:5cqi;border:1.2cqi solid #d2d2d7;border-left:0;border-radius:0 3cqi 3cqi 0}
.mk-fv-steam{position:absolute;left:35%;top:30%;width:6cqi;height:14cqi;border-radius:50%;background:radial-gradient(ellipse,rgba(255,253,249,.45),transparent 70%);filter:blur(.8cqi);animation:mk-fv-steam 4s ease-in-out infinite}
@keyframes mk-fv-steam{50%{transform:translateY(-2cqi) scaleX(1.3);opacity:.6}}
.mk-fv-vf__grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(33.3% - .5px),rgba(255,255,255,.35) calc(33.3% - .5px) calc(33.3% + .5px),transparent 0,transparent calc(66.6% - .5px),rgba(255,255,255,.35) 0 calc(66.6% + .5px),transparent 0),linear-gradient(180deg,transparent calc(33.3% - .5px),rgba(255,255,255,.35) 0 calc(33.3% + .5px),transparent 0,transparent calc(66.6% - .5px),rgba(255,255,255,.35) 0 calc(66.6% + .5px),transparent 0)}
.mk-fv-corner{position:absolute;width:5cqi;height:5cqi;border:.4cqi solid #ffffff}
.mk-fv-corner.c1{left:3cqi;top:3cqi;border-right:0;border-bottom:0}.mk-fv-corner.c2{right:3cqi;top:3cqi;border-left:0;border-bottom:0}
.mk-fv-corner.c3{left:3cqi;bottom:3cqi;border-right:0;border-top:0}.mk-fv-corner.c4{right:3cqi;bottom:3cqi;border-left:0;border-top:0}
.mk-fv-vf__top,.mk-fv-vf__bot{position:absolute;left:10cqi;right:10cqi;display:flex;justify-content:space-between;align-items:center;font:700 1.8cqi/1 var(--body);letter-spacing:.08em;color:#ffffff;text-shadow:0 .2cqi .6cqi rgba(0,0,0,.5)}
.mk-fv-vf__top{top:4cqi}.mk-fv-vf__bot{bottom:4cqi}
.mk-fv-vf__top span:first-child{display:flex;align-items:center;gap:1.2cqi}
.mk-fv-rec{width:1.8cqi;height:1.8cqi;border-radius:50%;background:#E5483B;animation:mk-fv-blink 1.2s steps(1) infinite}
@keyframes mk-fv-blink{50%{opacity:0}}
.mk-fv-bat{width:4.6cqi;height:2.2cqi;border:.3cqi solid #ffffff;border-radius:.5cqi;padding:.3cqi}
.mk-fv-bat i{display:block;width:70%;height:100%;background:#ffffff;border-radius:.2cqi}
.mk-fv-focus{position:absolute;left:28%;top:40%;width:20cqi;height:16cqi;border:.35cqi solid #d1d1d6;border-radius:.6cqi;animation:mk-fv-focus 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes mk-fv-focus{0%,15%{transform:scale(1.4);opacity:.4}25%,70%{transform:none;opacity:1}85%{transform:translate(12cqi,-6cqi) scale(.8);opacity:1}100%{transform:scale(1.4);opacity:.4}}
.mk-fv-shot{right:5%;top:58%;width:40%;padding:2.4cqi 2.8cqi}
.mk-fv-shot p{font-size:2.5cqi;margin-bottom:1.4cqi}
.mk-fv-shot ul{list-style:none;margin:0;padding:0;display:grid;gap:1cqi;font:600 1.8cqi/1.2 var(--body);color:#6e6e73}
.mk-fv-shot li{display:flex;align-items:center;gap:1.2cqi}
.mk-fv-shot li::before{content:"";width:1.8cqi;height:1.8cqi;border-radius:.5cqi;border:.25cqi solid #C9BFAE;flex:none}
.mk-fv-shot li.ok::before{background:#1d1d1f;border-color:#1d1d1f}

/* motion-design · Ventura Mobilidade: janela de um software de animação em SVG (visualizador, curva de easing e linha do tempo) */
.mk-mo{position:absolute;left:5%;top:8%;width:90%}
.mk-mo::before{content:"";position:absolute;inset:6% 2% -6%;background:radial-gradient(60% 60% at 50% 55%,rgba(255,228,150,.5),transparent 72%);filter:blur(5cqi);z-index:-1}
.mk-mo svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 4cqi 6cqi rgba(46,32,4,.5))}
.mk-mo-t{font-family:var(--body,"Manrope",system-ui,sans-serif)}
.mk-mo-play{animation:mk-mo-play 6s linear infinite}
.mk-mo-dia{transform-box:fill-box;transform-origin:center;animation:mk-mo-dia 6s cubic-bezier(.65,0,.35,1) infinite}
.mk-mo-ghost{animation:mk-mo-ghost 6s ease-in-out infinite}
.mk-mo-ghost.g2{animation-delay:.12s}
.mk-mo-dot{offset-path:path("M322 238C423.4 238 376.6 96 478 96");offset-rotate:0deg;filter:drop-shadow(0 0 3px #fff);animation:mk-mo-dot 6s cubic-bezier(.65,0,.35,1) infinite}
.mk-mo-sweep{transform-box:fill-box;transform-origin:left center;animation:mk-mo-sweep 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes mk-mo-play{0%{transform:translateX(0)}100%{transform:translateX(290px)}}
@keyframes mk-mo-dia{0%{transform:translate(-104px,64px) rotate(-70deg) scale(.45);opacity:0}30%,88%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes mk-mo-ghost{0%,8%{opacity:0}22%{opacity:1}32%,100%{opacity:0}}
@keyframes mk-mo-dot{0%{offset-distance:0%}50%,100%{offset-distance:100%}}
@keyframes mk-mo-sweep{0%,30%{transform:scaleX(0)}55%,88%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.mk-mo__chip{top:86%}
.mk-mo__chip.a{left:6%}
.mk-mo__chip.b{right:6%}
@media (prefers-reduced-motion:reduce){.mk-mo-play,.mk-mo-dia,.mk-mo-ghost,.mk-mo-dot,.mk-mo-sweep{animation:none}.mk-mo-ghost{opacity:1}}

/* ensaio-fotografico-com-ia · Lívia Prado Arquitetura */
.mk-fv-ai{position:absolute;left:6%;top:6%;width:88%;height:70%;display:grid;grid-template-columns:repeat(4,1fr);gap:2cqi;align-items:center}
.mk-fv-pt{position:relative;margin:0;aspect-ratio:3/4.4;border-radius:2cqi;overflow:hidden;box-shadow:0 3cqi 6cqi -3cqi rgba(0,0,0,.6)}
.mk-fv-pt.p1{background:linear-gradient(180deg,#8E8A84,#5B5852);margin-top:8cqi}
.mk-fv-pt.p2{background:linear-gradient(180deg,#e8e8ed,#8e8e93);margin-bottom:8cqi}
.mk-fv-pt.p3{background:linear-gradient(180deg,#3B4656,#1E242D);margin-top:8cqi}
.mk-fv-pt.p4{background:linear-gradient(180deg,#9AA08A,#5F664C);margin-bottom:8cqi}
.mk-fv-pt span{position:absolute;left:50%;bottom:0;width:78%;height:42%;border-radius:50% 50% 0 0/60% 60% 0 0;background:rgba(23,21,18,.55);transform:translateX(-50%)}
.mk-fv-pt span::before{content:"";position:absolute;left:50%;bottom:105%;width:48%;aspect-ratio:1/1.2;border-radius:50%;background:inherit;transform:translateX(-50%)}
.mk-fv-pt.p2 span{background:rgba(91,84,74,.6)}
.mk-fv-pt::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);animation:mk-fv-shine 5s ease-in-out infinite}
.mk-fv-pt.p2::after{animation-delay:.5s}.mk-fv-pt.p3::after{animation-delay:1s}.mk-fv-pt.p4::after{animation-delay:1.5s}
@keyframes mk-fv-shine{0%,40%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}
.mk-fv-pt figcaption{position:absolute;left:1.4cqi;top:1.4cqi;padding:.9cqi 1.4cqi;border-radius:9cqi;background:rgba(255,253,249,.85);font:700 1.5cqi/1 var(--body);color:#1d1d1f}
.mk-fv-ai__tag{right:6%;top:4%}
.mk-fv-ai__card{left:6%;top:72%;width:34%;display:grid;gap:1.2cqi;padding:2.2cqi 2.6cqi}
.mk-fv-ai__card p{font-size:2.4cqi}

/* restauracao-de-fotografias · Acervo Gomes (demonstração) */
.mk-fv-re{position:absolute;left:12%;top:6%;width:76%;height:72%;display:grid;place-items:center}
.mk-fv-re__print{width:100%;height:100%;padding:2.6cqi 2.6cqi 7cqi;background:#ffffff;border-radius:1cqi;box-shadow:0 4cqi 9cqi -3cqi rgba(0,0,0,.45);transform:rotate(-2deg)}
.mk-fv-re__img{position:relative;width:100%;height:100%;overflow:hidden;border-radius:.6cqi}
.mk-fv-re__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:63% 25%}
.mk-fv-re__old{position:absolute;inset:0;clip-path:inset(0 30% 0 0);animation:mk-fv-wipe 8s cubic-bezier(.65,0,.35,1) infinite}
.mk-fv-re__old img{filter:sepia(.95) contrast(.75) brightness(1.08) blur(.08cqi) saturate(.6)}
.mk-fv-re__old::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(60,40,15,.55) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.mk-fv-scr{position:absolute;inset:0;z-index:1;background:linear-gradient(97deg,transparent 22%,rgba(255,250,235,.8) 22.3%,transparent 22.6%),linear-gradient(83deg,transparent 48%,rgba(255,250,235,.6) 48.2%,transparent 48.5%),linear-gradient(170deg,transparent 70%,rgba(255,250,235,.7) 70.2%,transparent 70.5%),radial-gradient(circle at 18% 78%,rgba(255,250,235,.85) 0 2.5cqi,transparent 2.7cqi),linear-gradient(135deg,rgba(255,250,235,.9) 0 6%,transparent 6.3%)}
.mk-fv-re__bar{position:absolute;top:0;bottom:0;left:70%;width:.45cqi;background:#ffffff;transform:translateX(-50%);z-index:2;animation:mk-fv-bar 8s cubic-bezier(.65,0,.35,1) infinite}
.mk-fv-re__bar b{position:absolute;left:50%;top:50%;width:6cqi;height:6cqi;border-radius:50%;background:#ffffff;transform:translate(-50%,-50%);box-shadow:0 1cqi 2.6cqi rgba(0,0,0,.35)}
.mk-fv-re__bar b::before,.mk-fv-re__bar b::after{content:"";position:absolute;top:50%;border-top:1cqi solid transparent;border-bottom:1cqi solid transparent;transform:translateY(-50%)}
.mk-fv-re__bar b::before{left:1.2cqi;border-right:1.3cqi solid #1d1d1f}
.mk-fv-re__bar b::after{right:1.2cqi;border-left:1.3cqi solid #1d1d1f}
@keyframes mk-fv-wipe{0%,12%{clip-path:inset(0 30% 0 0)}45%,62%{clip-path:inset(0 72% 0 0)}100%{clip-path:inset(0 30% 0 0)}}
@keyframes mk-fv-bar{0%,12%{left:70%}45%,62%{left:28%}100%{left:70%}}
.mk-fv-re__lab{position:absolute;top:2cqi;z-index:3;padding:1cqi 1.8cqi;border-radius:9cqi;background:rgba(23,21,18,.7);color:#ffffff;font:700 1.6cqi/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.mk-fv-re__lab.l{left:2cqi}.mk-fv-re__lab.r{right:2cqi}
.mk-fv-re__chip{left:5%;top:5%;z-index:4}

/* ── implementacao-de-sites: the approved Figma frame becomes a live site */
.mk-im-figma{left:6%;top:20%;width:44%;display:grid;gap:1.4cqi;padding:2.2cqi;background:#2c2c2e;color:#fff}
.mk-im-bar{display:flex;align-items:center;gap:.8cqi}
.mk-im-bar i{width:1.2cqi;height:1.2cqi;border-radius:50%;background:#636366}
.mk-im-bar span{margin-left:1cqi;font:600 1.4cqi/1 var(--body);color:#aeaeb2}
.mk-im-frame{display:grid;gap:1.2cqi;padding:2.2cqi;border-radius:1.4cqi;background:#fff;outline:.3cqi dashed #B49A45;outline-offset:.4cqi}
.mk-im-frame b{height:9cqi;border-radius:1cqi;background:linear-gradient(135deg,#EFE2B4,#A08B34)}
.mk-im-frame .mk-l{height:1cqi;border-radius:1cqi;background:#e3e3e8}
.mk-im-frame .mk-l.d{background:#1d1d1f}
.mk-im-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqi}
.mk-im-row i{height:5cqi;border-radius:.8cqi;background:#f2f2f5}
.mk-im-frame.live{outline:none;border-radius:0}
.mk-im-ok{font:700 1.4cqi/1 var(--body);color:#D9C78E}
.mk-im-arrow{position:absolute;left:49%;top:44%;z-index:3;width:5cqi;height:.5cqi;background:#B49A45;border-radius:1cqi;animation:mk-im-go 2.4s ease-in-out infinite}
.mk-im-arrow::after{content:"";position:absolute;right:-.4cqi;top:50%;width:1.6cqi;height:1.6cqi;border:solid #B49A45;border-width:.5cqi .5cqi 0 0;transform:translateY(-50%) rotate(45deg)}
@keyframes mk-im-go{50%{transform:translateX(1.4cqi)}}
.mk-im-site{right:5%;top:38%;width:44%}
.mk-im-site .mk-im-frame.live{padding:2.2cqi}
.mk-im-site .mk-im-frame.live>*{animation:mk-in 7s ease infinite both}
.mk-im-site .mk-im-frame.live>*:nth-child(2){animation-delay:.3s}.mk-im-site .mk-im-frame.live>*:nth-child(3){animation-delay:.6s}.mk-im-site .mk-im-frame.live>*:nth-child(4){animation-delay:.9s}
.mk-im-chip{left:6%;bottom:9%;animation:mk-st-toast 7s ease infinite}
@media (prefers-reduced-motion:reduce){.mk-im-site .mk-im-frame.live>*{opacity:1;transform:none}}

/* Marca e design · mockups conceituais (marcas fictícias) */

/* identidade-visual · fotos reais compostas (assets/identidade/): hero e "Para quem é" */
.mk--foto{aspect-ratio:4/3;max-width:640px;background:#e6e6e9}
@media (min-width:1100px){.shero .mk--foto{width:calc(100% + 56px);max-width:none}}
.mk-foto{position:absolute;inset:0;display:block}
.mk-foto img{display:block;width:100%;height:100%;object-fit:cover}
.decide-foto{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.45);background:#e6e6e9}
.decide-foto img{display:block;width:100%;height:auto}
@media (max-width:960px){.decide-foto{order:-1}}

/* branding-estrategico · Lume */
.mk-mc-br-board{left:6cqi;top:7cqi;width:88cqi;height:58cqi;display:flex;flex-direction:column;gap:2.4cqi}
.mk-mc-br-head{display:flex;justify-content:space-between;align-items:baseline}
.mk-mc-br-head b{font-size:3.6cqi}
.mk-mc-br-head span{font:600 1.6cqi/1 var(--body);color:#8e8e93;letter-spacing:.12em;text-transform:uppercase}
.mk-mc-br-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1.8cqi}
.mk-mc-br-tile{position:relative;border-radius:1.8cqi;background:#f5f5f7;padding:2.2cqi;display:flex;flex-direction:column;gap:1.2cqi;animation:mk-mc-tile 8s ease-in-out infinite}
.mk-mc-br-tile:nth-child(2){animation-delay:-6s}.mk-mc-br-tile:nth-child(3){animation-delay:-4s}.mk-mc-br-tile:nth-child(4){animation-delay:-2s}
.mk-mc-br-tile small{font:700 1.4cqi/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#48484a}
.mk-mc-br-tile p{font:500 2cqi/1.35 var(--body);color:#2B2620}
.mk-mc-br-tags{display:flex;flex-wrap:wrap;gap:1cqi}
.mk-mc-br-tags i{font:700 1.7cqi/1 var(--body);font-style:normal;padding:1.1cqi 1.8cqi;border-radius:9cqi;background:#ffffff;border:1px solid #DCD3C3}
.mk-mc-br-arq{background:#8e8e93}
.mk-mc-br-arq small{color:#f2f2f7}
.mk-mc-br-arq p.mk-t{font-size:4.2cqi;color:#ffffff}
.mk-mc-br-arq b{position:absolute;right:2.4cqi;top:2.4cqi;width:3.4cqi;height:3.4cqi;border-radius:50%;border:.4cqi solid #f2f2f7;animation:mk-pulse 3s ease-in-out infinite}
.mk-mc-br-note{left:9cqi;top:69cqi;width:44cqi;background:#f2f2f7;transform:rotate(-2deg)}
.mk-mc-br-note small{font:700 1.4cqi/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#48484a}
.mk-mc-br-note p{font-size:3.3cqi;margin-top:1cqi;color:#2B2620}
.mk-mc-br-chip{right:7cqi;top:73cqi}
.mk-mc-br-chip b{background:#8e8e93}
@keyframes mk-mc-tile{0%,70%,100%{box-shadow:0 0 0 0 rgba(124,139,106,0)}80%{box-shadow:0 0 0 .5cqi rgba(124,139,106,.45)}}

/* naming · Ventre Cerâmica */
.mk-mc-nm-list{left:7cqi;top:6cqi;width:86cqi;height:56cqi;display:flex;flex-direction:column;gap:2cqi}
.mk-mc-nm-head{display:flex;justify-content:space-between;align-items:baseline}
.mk-mc-nm-head b{font-size:3.6cqi}
.mk-mc-nm-head span{font:600 1.6cqi/1 var(--body);color:#8A5A44}
.mk-mc-nm-list ol{list-style:none;margin:0;padding:0;display:grid;gap:1.2cqi;flex:1}
.mk-mc-nm-list li{position:relative;display:flex;align-items:baseline;gap:2.4cqi;padding:1.8cqi 2.4cqi;border-radius:1.6cqi;background:#f5f5f7;color:#9A9080}
.mk-mc-nm-list li b{font-size:3.4cqi;color:#4B443B;min-width:22cqi}
.mk-mc-nm-list li span{font:500 1.7cqi/1.2 var(--body)}
.mk-mc-nm-list li.is-pick{background:#1d1d1f;color:#8e8e93}
.mk-mc-nm-list li.is-pick b{color:#ffffff}
.mk-mc-nm-list li i{position:absolute;right:2.4cqi;top:50%;transform:translateY(-50%);width:3.6cqi;height:3.6cqi;border-radius:50%;background:#8e8e93;color:#1d1d1f;font:700 2cqi/3.6cqi var(--body);font-style:normal;text-align:center}
.mk-mc-nm-pick{position:absolute;left:7cqi;top:66cqi;width:50cqi;padding:2.6cqi 3cqi;border-radius:2.4cqi;background:#8A5A44;color:#ffffff;box-shadow:0 3cqi 7cqi -3cqi rgba(0,0,0,.4)}
.mk-mc-nm-pick small{font:700 1.4cqi/1 var(--body);letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.mk-mc-nm-pick p{font-size:7cqi;margin-top:1cqi;display:flex;align-items:center}
.mk-mc-nm-type{display:inline-block;overflow:hidden;white-space:nowrap;width:6.2ch;animation:mk-mc-type 7s steps(6) infinite}
.mk-mc-nm-pick i{width:.5cqi;height:6cqi;margin-left:.6cqi;background:#ffffff;animation:mk-mc-blink 1s steps(1) infinite}
.mk-mc-nm-c1{right:7cqi;top:67cqi}
.mk-mc-nm-c2{right:7cqi;top:76cqi}
.mk-mc-nm-c1 b,.mk-mc-nm-c2 b{background:#8A5A44}
@keyframes mk-mc-type{0%,8%{width:0}40%,85%{width:6.2ch}100%{width:0}}
@keyframes mk-mc-blink{50%{opacity:0}}

/* design-de-posts · Maré Moda Praia */
.mk-mc-po-fan{position:absolute;inset:0}
.mk-mc-po-slide{position:absolute;top:9cqi;width:38cqi;border-radius:2.2cqi;background:#ffffff;overflow:hidden;box-shadow:0 4cqi 8cqi -3cqi rgba(0,0,0,.35);transform-origin:50% 100%}
.mk-mc-po-slide header{display:flex;align-items:center;gap:1.2cqi;padding:1.6cqi 2cqi;font:700 1.6cqi/1 var(--body)}
.mk-mc-po-slide header i{width:3.2cqi;height:3.2cqi;border-radius:50%;background:conic-gradient(#3F6F6A,#E6D3B3,#8e8e93,#3F6F6A);box-shadow:inset 0 0 0 .5cqi #ffffff}
.mk-mc-po-slide.s1{left:6cqi;transform:rotate(-9deg);animation:mk-mc-fan1 7s ease-in-out infinite}
.mk-mc-po-slide.s3{left:56cqi;transform:rotate(9deg);animation:mk-mc-fan3 7s ease-in-out infinite}
.mk-mc-po-slide.s2{left:31cqi;top:6cqi;z-index:2;animation:mk-float 6s ease-in-out infinite}
.mk-mc-po-art{aspect-ratio:4/5;padding:3cqi;display:flex;flex-direction:column;justify-content:flex-end;gap:1.4cqi}
.mk-mc-po-art small{font:700 1.4cqi/1 var(--body);letter-spacing:.18em;text-transform:uppercase}
.mk-mc-po-art .mk-t{font-size:4.6cqi}
.mk-mc-po-art.a1{background:linear-gradient(170deg,#9CC1BA 0%,#3F6F6A 70%);color:#ffffff}
.mk-mc-po-art.a2{background:#E6D3B3;color:#1F3B38;justify-content:center}
.mk-mc-po-art.a2 .mk-l{background:rgba(31,59,56,.25)}
.mk-mc-po-art.a3{background:#1F3B38;color:#ffffff}
.mk-mc-po-art.a3 .mk-btn{align-self:flex-start;background:#E6D3B3;font-size:1.6cqi}
.mk-mc-po-dots{position:absolute;left:50%;top:75cqi;display:flex;gap:1cqi;transform:translateX(-50%)}
.mk-mc-po-dots i{width:1.4cqi;height:1.4cqi;border-radius:50%;background:#c7c7cc}
.mk-mc-po-dots i.on{background:#3F6F6A;width:4cqi;border-radius:2cqi}
.mk-mc-po-chip{left:6cqi;top:80cqi}
.mk-mc-po-chip b{background:#3F6F6A}
@keyframes mk-mc-fan1{50%{transform:rotate(-12deg) translateX(-1cqi)}}
@keyframes mk-mc-fan3{50%{transform:rotate(12deg) translateX(1cqi)}}

/* papelaria-e-materiais · Ribeiro & Lacerda */
.mk-mc-pa-letter{position:absolute;left:7cqi;top:7cqi;width:40cqi;aspect-ratio:1/1.414;background:#ffffff;border-radius:.8cqi;padding:4cqi 3.6cqi;display:flex;flex-direction:column;gap:1.3cqi;transform:rotate(-5deg);box-shadow:0 4cqi 9cqi -3cqi rgba(0,0,0,.55)}
.mk-mc-pa-mono{width:7cqi;height:7cqi}
.mk-mc-pa-mono.sm{width:5cqi;height:5cqi}
.mk-mc-pa-letter .mk-l{height:1cqi}
.mk-mc-pa-letter footer{margin-top:auto;display:grid;gap:1cqi}
.mk-mc-pa-letter footer small{font:600 1.3cqi/1 var(--body);color:#6B2D2A;letter-spacing:.08em}
.mk-mc-pa-env{position:absolute;right:6cqi;top:9cqi;width:50cqi;aspect-ratio:2.1/1;background:#f5f5f7;border-radius:.8cqi;padding:2.4cqi;transform:rotate(4deg);box-shadow:0 4cqi 8cqi -3cqi rgba(0,0,0,.5);overflow:hidden}
.mk-mc-pa-env::before{content:"";position:absolute;inset:0 0 auto;height:45%;background:#E8E0D2;clip-path:polygon(0 0,100% 0,50% 100%)}
.mk-mc-pa-env svg{position:relative}
.mk-mc-pa-addr{position:absolute;right:4cqi;bottom:3cqi;width:44%;display:grid;gap:1cqi}
.mk-mc-pa-addr .mk-l{height:.9cqi}
.mk-mc-pa-card{position:absolute;width:40cqi;aspect-ratio:1.75/1;border-radius:1.2cqi;box-shadow:0 4cqi 8cqi -3cqi rgba(0,0,0,.6)}
.mk-mc-pa-card.back{right:9cqi;top:57cqi;background:linear-gradient(140deg,#d1d1d6,#1d1d1f);display:grid;place-items:center;--r:8deg;rotate:8deg}
.mk-mc-pa-card.back svg{width:9cqi;height:9cqi}
.mk-mc-pa-card.front{right:16cqi;top:43cqi;background:#6B2D2A;color:#ffffff;padding:3cqi;display:flex;flex-direction:column;gap:.8cqi;rotate:-4deg}
.mk-mc-pa-card.front b{font-size:3cqi}
.mk-mc-pa-card.front small{font:600 1.5cqi/1 var(--body);color:#E6CFA0}
.mk-mc-pa-card.front .mk-l{height:.9cqi}

/* ui-ux-design · Fôlego */
.mk-mc-ux-p1{left:9cqi;top:6cqi;width:34cqi}
.mk-mc-ux-p2{left:53cqi;top:12cqi;width:30cqi}
.mk-mc-ux-scr{height:100%;padding:6cqi 2.4cqi 2.4cqi;display:flex;flex-direction:column;gap:1.5cqi;background:#ffffff}
.mk-mc-ux-scr.center{align-items:center;justify-content:center;text-align:center;gap:1.8cqi}
.mk-mc-ux-scr small{font:600 1.5cqi/1 var(--body);color:#8e8e93}
.mk-mc-ux-scr .mk-t{font-size:2.9cqi}
.mk-mc-ux-days{display:flex;gap:.8cqi}
.mk-mc-ux-days i{flex:1;padding:1cqi 0;border-radius:1.2cqi;background:#f5f5f7;font:600 1.3cqi/1.4 var(--body);font-style:normal;text-align:center;color:#8e8e93}
.mk-mc-ux-days b{display:block;font:700 1.9cqi/1.2 var(--head);color:#1d1d1f}
.mk-mc-ux-days i.on{background:#C46A4A;color:#FBE3D8}
.mk-mc-ux-days i.on b{color:#ffffff}
.mk-mc-ux-class{padding:1.6cqi;border-radius:1.4cqi;border:1px solid #d2d2d7;display:grid;gap:.5cqi}
.mk-mc-ux-class b{font:700 1.7cqi/1 var(--body)}
.mk-mc-ux-class span{font:500 1.4cqi/1 var(--body);color:#8e8e93}
.mk-mc-ux-class.on{border-color:#C46A4A;background:#FBF0EA}
.mk-mc-ux-scr .mk-btn{margin-top:auto;width:100%;background:#C46A4A;color:#ffffff;font-size:1.6cqi}
.mk-mc-ux-scr.center .mk-btn{margin-top:2cqi}
.mk-mc-ux-ok{width:10cqi;height:10cqi;border-radius:50%;background:#C46A4A;color:#ffffff;display:grid;place-items:center;font:700 4.4cqi/1 var(--body);animation:mk-pulse 3s ease-in-out infinite}
.mk-mc-ux-sel{position:absolute;left:52cqi;top:11cqi;width:32cqi;height:65.3cqi;border:.3cqi solid #0D99FF;pointer-events:none}
.mk-mc-ux-sel em{position:absolute;left:-.3cqi;top:-3.6cqi;padding:.7cqi 1.2cqi;border-radius:.6cqi;background:#0D99FF;color:#fff;font:700 1.4cqi/1 var(--body);font-style:normal;white-space:nowrap}
.mk-mc-ux-sel i{position:absolute;width:1.4cqi;height:1.4cqi;background:#fff;border:.3cqi solid #0D99FF}
.mk-mc-ux-sel i:nth-of-type(1){left:-.85cqi;top:-.85cqi}.mk-mc-ux-sel i:nth-of-type(2){right:-.85cqi;top:-.85cqi}
.mk-mc-ux-sel i:nth-of-type(3){left:-.85cqi;bottom:-.85cqi}.mk-mc-ux-sel i:nth-of-type(4){right:-.85cqi;bottom:-.85cqi}
.mk-mc-ux-cur{position:absolute;left:30cqi;top:60cqi;display:flex;align-items:flex-start;gap:.4cqi;animation:mk-mc-cur 9s ease-in-out infinite;z-index:4}
.mk-mc-ux-cur svg{width:3.4cqi;height:3.4cqi}
.mk-mc-ux-cur span{margin-top:2.6cqi;padding:.7cqi 1.2cqi;border-radius:.6cqi;background:#0D99FF;color:#fff;font:700 1.4cqi/1 var(--body)}
.mk-mc-ux-chip{left:6cqi;top:81cqi}
.mk-mc-ux-chip b{background:#C46A4A}
@keyframes mk-mc-cur{0%,100%{transform:translate(0,0)}30%{transform:translate(32cqi,-30cqi)}55%{transform:translate(38cqi,-6cqi)}80%{transform:translate(6cqi,-16cqi)}}

/* apresentacoes-comerciais · Orla */
.mk-mc-ap-slide{position:absolute;width:76cqi;aspect-ratio:16/9;border-radius:1.6cqi;background:#ffffff;box-shadow:0 4cqi 8cqi -3cqi rgba(0,0,0,.4);overflow:hidden}
.mk-mc-ap-slide.b2{left:16cqi;top:3cqi;transform:scale(.9);transform-origin:50% 0;padding:3cqi;display:flex;flex-direction:column;justify-content:flex-end;gap:2cqi;opacity:.85}
.mk-mc-ap-bars{flex:1;display:flex;align-items:flex-end;gap:2.4cqi}
.mk-mc-ap-bars i{flex:1;border-radius:.8cqi .8cqi 0 0;background:#2F4A55;opacity:.8}
.mk-mc-ap-bars i:last-child{background:#1d1d1f;opacity:1}
.mk-mc-ap-slide.b1{left:12cqi;top:7.5cqi;transform:scale(.95);transform-origin:50% 0;padding:3cqi;display:grid;grid-template-columns:1fr 1fr;gap:3cqi;align-items:center}
.mk-mc-ap-slide.b1 .mk-ph{height:100%}
.mk-mc-ap-slide.b1>div:last-child{display:grid;gap:1.4cqi}
.mk-mc-ap-slide.cover{left:8cqi;top:12cqi;background:linear-gradient(135deg,#2F4A55,#172A31);color:#ffffff;padding:4.4cqi;display:flex;flex-direction:column;justify-content:flex-end;gap:1.2cqi}
.mk-mc-ap-slide.cover::after{content:"";position:absolute;right:-8cqi;top:-10cqi;width:40cqi;height:40cqi;border-radius:50%;border:1px solid rgba(214,196,138,.35);box-shadow:0 0 0 5cqi rgba(214,196,138,.06),0 0 0 10cqi rgba(214,196,138,.04)}
.mk-mc-ap-logo{position:absolute;left:4.4cqi;top:4cqi;display:flex;align-items:center;gap:1.2cqi}
.mk-mc-ap-logo svg{width:7cqi}
.mk-mc-ap-logo b{font:700 2cqi/1 var(--head);letter-spacing:.3em;color:#d1d1d6}
.mk-mc-ap-slide.cover .mk-t{font-size:5.4cqi;max-width:15ch}
.mk-mc-ap-slide.cover small{font:600 1.6cqi/1 var(--body);color:rgba(255,253,249,.65);letter-spacing:.06em}
.mk-mc-ap-n{position:absolute;right:4cqi;bottom:4cqi;font:700 1.5cqi/1 var(--body);color:#d1d1d6;letter-spacing:.1em}
.mk-mc-ap-thumbs{position:absolute;left:8cqi;top:60cqi;width:76cqi;display:grid;grid-template-columns:repeat(5,1fr);gap:1.6cqi}
.mk-mc-ap-thumbs i{aspect-ratio:16/9;border-radius:.8cqi;background:#ffffff;opacity:.7;animation:mk-mc-act 10s steps(1) infinite}
.mk-mc-ap-thumbs i.c{background:#2F4A55}
.mk-mc-ap-thumbs i:nth-child(2){animation-delay:-8s}.mk-mc-ap-thumbs i:nth-child(3){animation-delay:-6s}.mk-mc-ap-thumbs i:nth-child(4){animation-delay:-4s}.mk-mc-ap-thumbs i:nth-child(5){animation-delay:-2s}
.mk-mc-ap-chip{right:8cqi;top:74cqi}
.mk-mc-ap-chip b{background:#2F4A55}
@keyframes mk-mc-act{0%{opacity:1;box-shadow:0 0 0 .4cqi #1d1d1f}20%,100%{opacity:.7;box-shadow:none}}

/* Marketing e performance · mockups conceituais (prefixo mk-mt-) */
@keyframes mk-mt-type{0%,10%{width:0}55%,90%{width:100%}100%{width:0}}
@keyframes mk-mt-caret{50%{border-color:transparent}}
@keyframes mk-mt-hl{0%,15%{background-size:0 100%}45%,100%{background-size:100% 100%}}
@keyframes mk-mt-move{0%,20%{transform:none}45%,70%{transform:translateX(calc(100% + 2.4cqi))}100%{transform:none}}
@keyframes mk-mt-ring{0%{transform:translate(-50%,-50%) scale(.4);opacity:.8}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
@keyframes mk-mt-bar{0%,10%{transform:scaleY(.15)}50%,100%{transform:none}}

/* tráfego pago · Casa Jabuti Cafés */
.mk-mt-ad-phone{left:12%;top:7%;width:36%}
.mk-mt-ad{padding:5.5cqi 0 2cqi;display:grid;gap:1.6cqi}
.mk-mt-ad__head{display:flex;align-items:center;gap:1.4cqi;padding:0 2cqi}
.mk-mt-ad__head i{width:4.4cqi;height:4.4cqi;border-radius:50%;background:linear-gradient(140deg,#8e8e93,#5B4A22);flex:none}
.mk-mt-ad__head b{display:block;font-size:1.8cqi}
.mk-mt-ad__head small{font-size:1.4cqi;color:#6e6e73}
.mk-mt-ad__img{aspect-ratio:1;border-radius:0;display:flex;align-items:flex-end;padding:2cqi;background:linear-gradient(160deg,#6B4A2A,#2A1C12 70%)}
.mk-mt-ad__img span{color:#ffffff;font-size:3.2cqi}
.mk-mt-ad__cta{display:flex;justify-content:space-between;padding:1.4cqi 2cqi;background:#f2f2f7;font:700 1.6cqi/1 var(--body);color:#1d1d1f}
.mk-mt-ad__txt{display:grid;gap:1cqi;padding:0 2cqi}
.mk-mt-camp{right:7%;top:20%;width:46%;display:grid;gap:1.6cqi}
.mk-mt-camp__top{display:flex;justify-content:space-between;align-items:center}
.mk-mt-camp__top b{font-size:2.8cqi}
.mk-mt-live{display:flex;align-items:center;gap:.8cqi;font:700 1.5cqi/1 var(--body);color:#3a3a3c}
.mk-mt-live i{width:1.3cqi;height:1.3cqi;border-radius:50%;background:#7C9A45;animation:mk-pulse 2s ease-in-out infinite}
.mk-mt-camp__row{display:flex;justify-content:space-between;align-items:center;gap:1.4cqi;padding:1.2cqi 0;border-top:1px solid #d2d2d7;font:600 1.6cqi/1.2 var(--body)}
.mk-mt-camp__row em{width:5cqi;height:2.6cqi;border-radius:9cqi;background:#1d1d1f;position:relative;flex:none}
.mk-mt-camp__row em::after{content:"";position:absolute;right:.4cqi;top:.4cqi;width:1.8cqi;height:1.8cqi;border-radius:50%;background:#ffffff}
.mk-mt-bars{display:flex;align-items:flex-end;gap:1.2cqi;height:12cqi;padding-top:1cqi}
.mk-mt-bars i{flex:1;border-radius:.8cqi .8cqi .3cqi .3cqi;background:linear-gradient(#8e8e93,#1d1d1f);transform-origin:50% 100%;animation:mk-mt-bar 5s cubic-bezier(.22,1,.36,1) infinite alternate}
.mk-mt-bars i:nth-child(2n){animation-delay:-.6s}
.mk-mt-camp__days{display:flex;justify-content:space-between;font:600 1.3cqi/1 var(--body);color:#6e6e73}
.mk-mt-ad-chip{left:6%;bottom:17%}

/* SEO · Vértebra Fisioterapia */
.mk-mt-search{left:8%;right:8%;top:7%;display:flex;align-items:center;gap:2.4cqi;padding:2cqi 2.4cqi}
.mk-mt-glogo{font-size:2.8cqi;color:#1d1d1f}
.mk-mt-bar{flex:1;display:flex;align-items:center;justify-content:space-between;padding:1.6cqi 2.4cqi;border-radius:9cqi;border:1px solid #d2d2d7;background:#f5f5f7}
.mk-mt-q{font:600 1.9cqi/1 var(--body);white-space:nowrap;overflow:hidden;border-right:.3cqi solid #1d1d1f;animation:mk-mt-type 7s steps(26) infinite,mk-mt-caret .8s steps(1) infinite;width:0}
.mk-mt-bar i{width:2.6cqi;height:2.6cqi;border-radius:50%;border:.4cqi solid #1d1d1f;flex:none}
.mk-mt-maps{left:14%;right:14%;top:24%;padding:0;overflow:hidden}
.mk-mt-map{position:relative;height:26cqi;background:#E9E3D6;overflow:hidden}
.mk-mt-road{position:absolute;background:#ffffff;border-radius:9cqi}
.mk-mt-road.a{left:-10%;right:-10%;top:42%;height:2.6cqi;transform:rotate(-8deg)}
.mk-mt-road.b{top:-10%;bottom:-10%;left:62%;width:2.2cqi;transform:rotate(12deg)}
.mk-mt-road.c{left:-10%;right:30%;top:78%;height:1.6cqi;transform:rotate(5deg);background:#D8CCB3}
.mk-mt-pin,.mk-mt-pin-ring{position:absolute;left:58%;top:42%;transform:translate(-50%,-50%)}
.mk-mt-pin{width:5cqi;height:5cqi;border-radius:50% 50% 50% 0;background:#1d1d1f;transform:translate(-50%,-70%) rotate(-45deg);z-index:2;box-shadow:0 1cqi 2cqi -1cqi rgba(0,0,0,.5)}
.mk-mt-pin::after{content:"";position:absolute;inset:1.5cqi;border-radius:50%;background:#ffffff}
.mk-mt-pin-ring{width:6cqi;height:6cqi;border-radius:50%;border:.4cqi solid #1d1d1f;animation:mk-mt-ring 2.4s ease-out infinite}
.mk-mt-biz{padding:2.6cqi;display:grid;gap:1.2cqi}
.mk-mt-biz b{font-size:3.2cqi}
.mk-mt-stars{display:flex;align-items:center;gap:1cqi;font:700 1.8cqi/1 var(--body)}
.mk-mt-stars i{font-style:normal;color:#8e8e93;letter-spacing:.2cqi}
.mk-mt-stars small{color:#6e6e73;font-weight:600}
.mk-mt-open{font:500 1.6cqi/1.3 var(--body);color:#6e6e73}
.mk-mt-open em{font-style:normal;font-weight:700;color:#3a3a3c}
.mk-mt-acts{display:flex;gap:1.2cqi;margin-top:.8cqi}
.mk-mt-ghost{padding:1.5cqi 2.6cqi;border-radius:1.4cqi;border:1px solid #d2d2d7;font:700 1.7cqi/1 var(--body)}
.mk-mt-seo-chip{right:6%;bottom:17%}

/* social media · Ateliê Maré */
.mk-mt-ig{left:9%;top:6%;width:38%}
.mk-mt-ig__in{padding:5.5cqi 1.6cqi 1.6cqi;display:grid;gap:1.6cqi}
.mk-mt-ig__head{display:flex;align-items:center;gap:1.4cqi}
.mk-mt-ig__head i{width:6cqi;height:6cqi;border-radius:50%;background:conic-gradient(#8e8e93,#48484a,#e8e8ed,#8e8e93);box-shadow:inset 0 0 0 .6cqi #ffffff;flex:none}
.mk-mt-ig__head b{display:block;font-size:1.9cqi}
.mk-mt-ig__head small{font-size:1.4cqi;color:#6e6e73}
.mk-mt-ig__stats{display:flex;justify-content:space-between;font:700 1.3cqi/1 var(--body)}
.mk-mt-ig__stats span{flex:1;text-align:center;padding:1.1cqi 0;border-radius:1cqi;background:#f5f5f7;margin:0 .4cqi}
.mk-mt-ig__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5cqi}
.mk-mt-ig__grid i{aspect-ratio:1;border-radius:.4cqi}
.mk-mt-ig__grid i:nth-child(1){background:linear-gradient(160deg,#E9C8A0,#B7774A)}
.mk-mt-ig__grid i:nth-child(6){background:linear-gradient(160deg,#9CC3C8,#3E6E78)}
.mk-mt-ig__grid i:nth-child(8){background:linear-gradient(160deg,#F2DCC2,#C79C6B)}
.mk-mt-cal{right:6%;top:24%;width:50%;display:grid;gap:2cqi}
.mk-mt-cal b{font-size:2.8cqi}
.mk-mt-cal__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1cqi}
.mk-mt-cal__grid span{font:700 1.4cqi/1 var(--body);color:#6e6e73;text-align:center;padding-bottom:.6cqi}
.mk-mt-cal__grid em{height:6.4cqi;border-radius:1.2cqi;background:#f5f5f7;font:700 1.25cqi/1 var(--body);font-style:normal;display:flex;align-items:flex-end;padding:.9cqi;color:#1d1d1f;overflow:hidden}
.mk-mt-cal__grid em.r{background:#1d1d1f;color:#8e8e93}
.mk-mt-cal__grid em.c{background:#8e8e93}
.mk-mt-cal__grid em.s{background:#f2f2f7}
.mk-mt-cal__grid em.r,.mk-mt-cal__grid em.c{animation:mk-pulse 4s ease-in-out infinite}
.mk-mt-cal__grid em.c{animation-delay:-2s}

/* e-mail e CRM · Empório Vinha Serrana */
.mk-mt-mail{left:6%;top:7%;width:52%;height:72%}
.mk-mt-mail__in{padding:2.4cqi;display:grid;gap:1.4cqi}
.mk-mt-from{font:700 1.4cqi/1.3 var(--body);color:#6e6e73}
.mk-mt-mail__img{aspect-ratio:16/10;display:flex;align-items:flex-end;padding:2cqi;background:linear-gradient(160deg,#5A1E2B,#1E0B10 75%)}
.mk-mt-mail__img span{color:#ffffff;font-size:3cqi}
.mk-mt-mail__in .mk-btn{justify-self:start;margin-top:.6cqi}
.mk-mt-crm{right:6%;top:30%;width:44%;display:grid;gap:1.8cqi}
.mk-mt-crm b{font-size:2.6cqi}
.mk-mt-crm__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqi}
.mk-mt-crm__cols div{display:grid;gap:1cqi;align-content:start;padding:1.2cqi;border-radius:1.4cqi;background:#f5f5f7;min-height:20cqi}
.mk-mt-crm__cols small{font:700 1.2cqi/1.2 var(--body);color:#6e6e73}
.mk-mt-crm__cols i{height:4.2cqi;border-radius:1cqi;background:#ffffff;box-shadow:0 .4cqi 1cqi -.4cqi rgba(0,0,0,.25)}
.mk-mt-crm__cols i.g{background:#f2f2f7}
.mk-mt-move{position:relative;z-index:2;animation:mk-mt-move 6s cubic-bezier(.65,0,.35,1) infinite}
.mk-mt-crm-chip{right:8%;top:12%}

/* copywriting · Lume Advocacia */
.mk-mt-doc{left:9%;top:7%;width:66%;display:grid;gap:1.4cqi;padding:3.4cqi}
.mk-mt-doc__tag{font:700 1.4cqi/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#6e6e73;margin-bottom:1cqi}
.mk-mt-doc__h{font-size:4.6cqi}
.mk-mt-type{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;vertical-align:bottom;border-right:.4cqi solid #1d1d1f;animation:mk-mt-type 8s steps(25) infinite,mk-mt-caret .8s steps(1) infinite;width:0}
.mk-mt-doc__p{display:grid;gap:1.1cqi;margin-top:1.2cqi}
.mk-mt-hl{display:block;padding:.5cqi;margin:-.5cqi;border-radius:.6cqi;background:linear-gradient(#f2f2f7,#f2f2f7) no-repeat 0 0/0 100%;animation:mk-mt-hl 8s ease-in-out infinite}
.mk-mt-hl.late{animation-delay:-3s}
.mk-mt-doc .mk-btn{justify-self:start;margin-top:1.4cqi}
.mk-mt-note{position:absolute;right:6%;top:40%;width:32%;padding:2.2cqi;border-radius:2cqi;background:#1d1d1f;color:#ffffff;display:grid;gap:1cqi;box-shadow:0 3cqi 7cqi -3cqi rgba(0,0,0,.5)}
.mk-mt-note b{font:700 1.4cqi/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#8e8e93}
.mk-mt-note span{font:500 1.8cqi/1.4 var(--body)}

/* consultoria · Trilha Pet Center */
.mk-mt-road-board{left:6%;right:6%;top:8%;display:grid;gap:2.4cqi;padding:3cqi}
.mk-mt-rb__top{display:flex;justify-content:space-between;align-items:baseline;gap:2cqi}
.mk-mt-rb__top b{font-size:3.4cqi}
.mk-mt-rb__top small{font:600 1.5cqi/1 var(--body);color:#6e6e73}
.mk-mt-rb__track{height:1cqi;border-radius:9cqi;background:#f5f5f7;overflow:hidden}
.mk-mt-rb__track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8e8e93,#1d1d1f);transform-origin:0 50%;animation:mk-grow 7s cubic-bezier(.65,0,.35,1) infinite alternate}
.mk-mt-rb__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqi}
.mk-mt-rb__cols div{display:grid;gap:1.1cqi;align-content:start;padding:1.6cqi;border-radius:1.6cqi;background:#f5f5f7;min-height:30cqi}
.mk-mt-rb__cols small{font:700 1.35cqi/1.2 var(--body);color:#6e6e73;margin-bottom:.4cqi}
.mk-mt-rb__cols span{display:flex;align-items:center;gap:1cqi;padding:1.3cqi;border-radius:1cqi;background:#ffffff;font:600 1.45cqi/1.25 var(--body);box-shadow:0 .4cqi 1cqi -.4cqi rgba(0,0,0,.2)}
.mk-mt-rb__cols span::before{content:"";flex:none;width:1.6cqi;height:1.6cqi;border-radius:50%;border:.3cqi solid #8e8e93}
.mk-mt-rb__cols span.ok::before{background:#1d1d1f;border-color:#1d1d1f}
.mk-mt-rb__cols div:nth-child(2) span:first-of-type{animation:mk-pulse 3.5s ease-in-out infinite}
.mk-mt-rb-chip{left:8%;bottom:17%}

/* ── time-comercial · Nexo Engenharia: a deal moves along the pipeline, the monthly goal fills */
.mk-tc-crm{left:5%;top:9%;width:62%;height:62%}
.mk-tc-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2cqi;padding:2cqi;height:calc(100% - 5cqi)}
.mk-tc-cols div{display:flex;flex-direction:column;gap:1.1cqi;padding:1.2cqi;border-radius:1.4cqi;background:#f5f5f7}
.mk-tc-cols small{font:700 1.3cqi/1.2 var(--body);color:#6e6e73;margin-bottom:.4cqi}
.mk-tc-cols i{height:4.6cqi;border-radius:1cqi;background:#fff;box-shadow:0 .4cqi 1cqi -.4cqi rgba(0,0,0,.25)}
.mk-tc-cols i.mk-tc-move{background:linear-gradient(135deg,#EFE2B4,#C2AE66);animation:mk-tc-move 7s ease-in-out infinite}
@keyframes mk-tc-move{0%,20%{transform:none}45%,70%{transform:translateX(calc(100% + 3.6cqi))}100%{transform:none}}
.mk-tc-goal{right:5%;bottom:14%;width:38%;display:grid;gap:1.2cqi}
.mk-tc-goal small{font:700 1.4cqi/1 var(--body);color:#6e6e73}
.mk-tc-goal .mk-t{font-size:3.4cqi}
.mk-tc-bar{height:1.2cqi;border-radius:2cqi;background:#f2f2f7;overflow:hidden}
.mk-tc-bar i{display:block;height:100%;width:72%;background:linear-gradient(90deg,#D9C78E,#A08B34);transform-origin:0 50%;animation:mk-grow 7s ease-in-out infinite}
.mk-tc-rate{display:flex;justify-content:space-between;font:600 1.5cqi/1 var(--body);color:#6e6e73}
.mk-tc-rate em{font-style:normal;color:#2F6B3A}
.mk-tc-chip{left:6%;bottom:9%;animation:mk-st-toast 7s ease infinite}
@media (prefers-reduced-motion:reduce){.mk-tc-cols i.mk-tc-move{transform:none}}

/* ───────── Foto e vídeo (novas páginas) · hero mockups, classes mk-md- */
.mk-md-chip{left:6%;bottom:9%;animation:mk-st-toast 7s ease infinite}

/* vídeos com IA: vertical player + scene timeline */
.mk-md-reel{position:absolute;left:12%;top:8%;width:30%;aspect-ratio:9/16;border-radius:3cqi;overflow:hidden;background:#0b0b0c;box-shadow:0 4cqi 9cqi -3cqi rgba(0,0,0,.55)}
.mk-md-reel__scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:1cqi;padding:3cqi;background:linear-gradient(160deg,#f3d7b6,#c98b6b 45%,#4a2f3a);background-size:100% 160%;animation:mk-md-pan 8s ease-in-out infinite alternate}
.mk-md-reel__scene i{position:absolute;left:22%;top:16%;width:56%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff6e8,#f0c99a 60%,transparent 70%);opacity:.85}
.mk-md-reel__scene .mk-t{position:relative;font-size:3cqi;color:#fff;line-height:1.05}
.mk-md-reel__scene small{position:relative;font:600 1.4cqi/1 var(--body);color:rgba(255,255,255,.8)}
.mk-md-reel__bar{position:absolute;left:3cqi;right:3cqi;top:2.4cqi;height:.6cqi;border-radius:1cqi;background:rgba(255,255,255,.3);overflow:hidden}
.mk-md-reel__bar i{display:block;height:100%;background:#fff;transform-origin:0 50%;animation:mk-grow 7s linear infinite}
@keyframes mk-md-pan{to{background-position:0 100%}}
.mk-md-tl{right:6%;top:24%;width:44%;display:grid;gap:1.6cqi}
.mk-md-tl small{font:700 1.3cqi/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#6e6e73}
.mk-md-tl__row{display:grid;grid-template-columns:repeat(4,1fr);gap:1cqi}
.mk-md-tl__row span{aspect-ratio:9/16;border-radius:1cqi;animation:mk-in 7s ease infinite both}
.mk-md-tl__row .s0{background:linear-gradient(160deg,#f3d7b6,#c98b6b)}.mk-md-tl__row .s1{background:linear-gradient(160deg,#d9c78e,#7a6519);animation-delay:.3s}
.mk-md-tl__row .s2{background:linear-gradient(160deg,#9fb5c9,#3b4c5c);animation-delay:.6s}.mk-md-tl__row .s3{background:linear-gradient(160deg,#e8d9bf,#a08b34);animation-delay:.9s}
.mk-md-tl__wave{display:flex;align-items:center;gap:.5cqi;height:5cqi}
.mk-md-tl__wave i{flex:1;border-radius:1cqi;background:#d2d2d7;animation:mk-md-wave 1.6s ease-in-out infinite}
.mk-md-tl__wave i:nth-child(3n){animation-delay:.3s}.mk-md-tl__wave i:nth-child(3n+1){animation-delay:.6s}
@keyframes mk-md-wave{50%{transform:scaleY(.5)}}

/* animação 3D: rotating box + wireframe */
.mk-md-3d{position:absolute;left:14%;top:16%;width:36%;aspect-ratio:1;perspective:80cqi}
.mk-md-3d__obj{position:absolute;left:25%;top:10%;width:50%;height:80%;transform-style:preserve-3d;animation:mk-md-spin 9s ease-in-out infinite}
.mk-md-3d__obj>div{position:absolute;inset:0;border-radius:1cqi}
.mk-md-3d__obj .f{display:flex;flex-direction:column;justify-content:flex-end;gap:.8cqi;padding:2.4cqi;background:linear-gradient(160deg,#2f5d50,#163128);transform:translateZ(9cqi);color:#fff}
.mk-md-3d__obj .f small{font:700 1.2cqi/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#D9C78E}
.mk-md-3d__obj .f .mk-t{font-size:2.6cqi;color:#fff}
.mk-md-3d__obj .b{background:#163128;transform:rotateY(180deg) translateZ(9cqi)}
.mk-md-3d__obj .l,.mk-md-3d__obj .r{left:calc(50% - 9cqi);width:18cqi;background:#21453a}
.mk-md-3d__obj .l{transform:rotateY(-90deg) translateZ(calc(50% * 1));transform:rotateY(-90deg) translateZ(9cqi)}
.mk-md-3d__obj .r{transform:rotateY(90deg) translateZ(9cqi)}
.mk-md-3d__obj .t{top:calc(50% - 9cqi);height:18cqi;background:#2a5446;transform:rotateX(90deg) translateZ(14.4cqi)}
@keyframes mk-md-spin{0%,100%{transform:rotateX(-18deg) rotateY(-38deg)}50%{transform:rotateX(-18deg) rotateY(38deg)}}
.mk-md-wire{right:7%;top:20%;width:30%;display:grid;gap:1.2cqi;justify-items:center}
.mk-md-wire svg{width:100%;fill:none;stroke:#1d1d1f;stroke-width:.8;stroke-linejoin:round}
.mk-md-wire svg .g{stroke:#B49A45;stroke-dasharray:2 1.6;animation:sa-flowline 1.6s linear infinite}
.mk-md-wire small{font:700 1.3cqi/1 var(--body);color:#6e6e73}

/* tratamento de imagens: before / after slider */
.mk-md-ba{left:12%;top:10%;width:58%;aspect-ratio:4/3;padding:0;overflow:hidden}
.mk-md-ba__img{position:absolute;inset:0;display:grid;place-items:center}
.mk-md-ba__img i{width:34%;aspect-ratio:3/4;border-radius:40% 40% 12% 12%;background:linear-gradient(90deg,#c7a27a,#e9cfae 50%,#b58d64)}
.mk-md-ba__img.before{background:linear-gradient(135deg,#8a8172,#5e5649);filter:saturate(.6) brightness(.85)}
.mk-md-ba__img.before i{filter:brightness(.8) saturate(.6)}
.mk-md-ba__img.after{background:#fff;clip-path:inset(0 0 0 50%);animation:mk-md-wipe 7s ease-in-out infinite}
.mk-md-ba__img.after i{box-shadow:0 3cqi 3cqi -2cqi rgba(0,0,0,.25)}
.mk-md-ba__line{position:absolute;top:0;bottom:0;left:50%;width:.4cqi;background:#fff;box-shadow:0 0 1cqi rgba(0,0,0,.3);animation:mk-md-line 7s ease-in-out infinite}
.mk-md-ba__line b{position:absolute;left:50%;top:50%;width:4.4cqi;height:4.4cqi;margin:-2.2cqi 0 0 -2.2cqi;border-radius:50%;background:#fff;box-shadow:0 .6cqi 1.6cqi rgba(0,0,0,.3)}
.mk-md-ba small{position:absolute;top:2.4cqi;font:700 1.3cqi/1 var(--body);padding:.9cqi 1.4cqi;border-radius:9cqi;background:rgba(0,0,0,.55);color:#fff}
.mk-md-ba small.a{left:2.4cqi}.mk-md-ba small.d{right:2.4cqi;background:#1d1d1f}
@keyframes mk-md-wipe{0%,100%{clip-path:inset(0 0 0 70%)}50%{clip-path:inset(0 0 0 25%)}}
@keyframes mk-md-line{0%,100%{left:70%}50%{left:25%}}

/* fotografia de produtos: visor da câmera, set de estúdio e miniaturas */
.mk-md-defs{position:absolute;width:0;height:0;overflow:hidden}
.mk-md-cam{position:absolute;left:8%;top:9%;width:58%;padding:1.6cqi;border-radius:2.6cqi;background:#1d1d1f;box-shadow:0 4cqi 9cqi -3cqi rgba(0,0,0,.45)}
.mk-md-cam__view{position:relative;aspect-ratio:4/3;border-radius:1.4cqi;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,0) 50%,rgba(255,255,255,.4) 62%,rgba(90,70,45,.1) 100%),radial-gradient(120% 95% at 30% 18%,#fcf9f3 0%,#efe9de 55%,#dcd3c3 100%);box-shadow:inset 0 0 6cqi rgba(0,0,0,.16)}
.mk-md-cam__view .sheen{position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.6),rgba(255,255,255,0) 55%)}
.mk-md-cam__view .p,.mk-md-cam__view .pr{position:absolute;left:40%;bottom:18%;width:20%;height:auto}
.mk-md-cam__view .p{filter:drop-shadow(.5cqi .2cqi .7cqi rgba(50,32,18,.22))}
.mk-md-cam__view .pr{transform:scaleY(-1);transform-origin:bottom;opacity:.32;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.65),transparent 46%);mask-image:linear-gradient(to top,rgba(0,0,0,.65),transparent 46%)}
.mk-md-cam__view .sh{position:absolute;left:35%;bottom:15.4%;width:30%;height:5.4%;background:radial-gradient(closest-side,rgba(45,28,14,.6),rgba(45,28,14,0));filter:blur(.35cqi)}
.mk-md-cam__view .cast{position:absolute;left:49%;bottom:16.2%;width:25%;height:3.6%;background:linear-gradient(90deg,rgba(45,28,14,.34),rgba(45,28,14,0));border-radius:50%;filter:blur(.5cqi);transform:skewX(-38deg);transform-origin:left bottom}
.mk-md-cam__view .grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent 33.1%,rgba(40,40,44,.22) 33.2% 33.5%,transparent 33.6% 66.3%,rgba(40,40,44,.22) 66.4% 66.7%,transparent 66.8%),linear-gradient(0deg,transparent 33.1%,rgba(40,40,44,.22) 33.2% 33.5%,transparent 33.6% 66.3%,rgba(40,40,44,.22) 66.4% 66.7%,transparent 66.8%)}
.mk-md-cam__view .c{position:absolute;width:3.4cqi;height:3.4cqi;border:solid rgba(40,40,44,.75);opacity:.9}
.mk-md-cam__view .tl{left:4%;top:6%;border-width:.35cqi 0 0 .35cqi}.mk-md-cam__view .tr{right:4%;top:6%;border-width:.35cqi .35cqi 0 0}
.mk-md-cam__view .bl{left:4%;bottom:6%;border-width:0 0 .35cqi .35cqi}.mk-md-cam__view .br{right:4%;bottom:6%;border-width:0 .35cqi .35cqi 0}
.mk-md-cam__view .focus{position:absolute;left:43.5%;top:52%;width:13%;height:18%;border:.3cqi solid #3E9150;border-radius:.5cqi;box-shadow:0 0 0 .2cqi rgba(255,255,255,.55);animation:mk-md-focus 4s ease-in-out infinite}
.mk-md-cam__view .focus b{position:absolute;left:-.3cqi;top:-2.5cqi;padding:.35cqi .8cqi;border-radius:.4cqi;background:#3E9150;color:#fff;font:700 1.15cqi/1 var(--body);letter-spacing:.06em}
.mk-md-cam__view .hud{position:absolute}
.mk-md-cam__view .tp{left:11%;top:7.4%;display:flex;gap:1.2cqi}
.mk-md-cam__view .tp em{font:700 1.2cqi/1 var(--body);font-style:normal;letter-spacing:.06em;padding:.5cqi .9cqi;border-radius:.5cqi;background:rgba(29,29,31,.78);color:#fff}
.mk-md-cam__view .bat{right:11%;top:7.6%;width:3.4cqi;height:1.7cqi;border:.25cqi solid rgba(29,29,31,.8);border-radius:.4cqi}
.mk-md-cam__view .bat::after{content:"";position:absolute;right:-.7cqi;top:.3cqi;width:.4cqi;height:.7cqi;background:rgba(29,29,31,.8);border-radius:0 .2cqi .2cqi 0}
.mk-md-cam__view .bat i{position:absolute;left:.2cqi;top:.2cqi;bottom:.2cqi;width:70%;background:rgba(29,29,31,.8);border-radius:.2cqi}
.mk-md-cam__view .hist{right:8.5%;bottom:9%;width:11%;height:auto;padding:.6cqi;border-radius:.6cqi;background:rgba(29,29,31,.72);box-sizing:content-box}
.mk-md-cam__view .ev{left:50%;bottom:8.4%;width:26%;height:.9cqi;transform:translateX(-50%);background:repeating-linear-gradient(90deg,rgba(29,29,31,.7) 0 .22cqi,transparent .22cqi 2.45cqi)}
.mk-md-cam__view .ev i{position:absolute;left:50%;top:-.9cqi;width:0;height:0;border:.7cqi solid transparent;border-top-color:#3E9150;transform:translateX(-50%)}
.mk-md-cam__view .flash{position:absolute;inset:0;background:#fff;opacity:0;animation:mk-md-flash 4s ease infinite}
@keyframes mk-md-focus{0%,30%{transform:scale(1.25);opacity:.4}45%,100%{transform:none;opacity:1}}
@keyframes mk-md-flash{0%,55%{opacity:0}58%{opacity:.9}70%,100%{opacity:0}}
@keyframes mk-md-beam{0%,52%{opacity:.55}58%{opacity:1}72%,100%{opacity:.55}}
.mk-md-cam__info{display:flex;gap:2.4cqi;padding:1.2cqi .6cqi 0;font:600 1.3cqi/1 var(--body);color:#a1a1a6}
.mk-md-cam__info .n{margin-left:auto}
.mk-md-studio{position:absolute;left:8%;top:61.5%;width:58%;height:auto;border-radius:2.2cqi;box-shadow:0 3cqi 7cqi -3cqi rgba(0,0,0,.28)}
.mk-md-studio .beam{animation:mk-md-beam 4s ease infinite}
.mk-md-thumbs{position:absolute;right:6%;top:22%;width:24%;display:grid;gap:2cqi}
.mk-md-thumbs div{position:relative;aspect-ratio:1;border-radius:1.6cqi;background:#fff;display:grid;place-items:center;box-shadow:0 3cqi 7cqi -3cqi rgba(0,0,0,.35);overflow:hidden}
.mk-md-thumbs div:last-child{background:linear-gradient(160deg,#eadfce,#c9b392)}
.mk-md-thumbs svg{position:relative;width:27%;height:auto;margin-top:6%;filter:drop-shadow(0 .5cqi .5cqi rgba(40,26,14,.3))}
.mk-md-thumbs .pod{position:absolute;left:21%;right:21%;bottom:15%;height:19%;border-radius:50%;background:linear-gradient(#f7f0e4,#d9c8ab);box-shadow:0 1cqi 1.4cqi -.4cqi rgba(70,48,24,.35)}
@media (prefers-reduced-motion:reduce){.mk-md-studio .beam{animation:none}}

/* VSL: 16:9 player with caption, progress and CTA */
.mk-md-vsl{left:7%;top:12%;width:76%;background:#0b0b0c}
.mk-md-vsl__screen{position:relative;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqi;background:radial-gradient(120% 90% at 30% 20%,#3a3a3c,#111 70%)}
.mk-md-vsl__cap{max-width:80%;text-align:center;font:700 3.4cqi/1.15 var(--head);color:#fff;padding:1.2cqi 2cqi;border-radius:1cqi;background:rgba(0,0,0,.45)}
.mk-md-vsl__cap em{font-style:normal;color:#D9C78E}
.mk-md-vsl__cta{opacity:0;animation:mk-md-cta 7s ease infinite}
@keyframes mk-md-cta{0%,45%{opacity:0;transform:translateY(2cqi)}55%,92%{opacity:1;transform:none}100%{opacity:0}}
.mk-md-vsl__bar{display:flex;align-items:center;gap:2cqi;padding:1.6cqi 2.4cqi;background:#1c1c1e}
.mk-md-vsl__bar i{position:relative;flex:1;height:.8cqi;border-radius:1cqi;background:#3a3a3c;overflow:hidden}
.mk-md-vsl__bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#D9C78E,#A08B34);transform-origin:0 50%;animation:mk-md-prog 7s linear infinite}
.mk-md-vsl__bar span{font:600 1.3cqi/1 var(--body);color:#a1a1a6}
@keyframes mk-md-prog{from{transform:scaleX(.35)}to{transform:scaleX(.62)}}

/* design para e-commerce: desktop banner, mobile banner, marketplace card */
.mk-md-bf{left:5%;top:8%;width:64%}
.mk-md-bf__hero{position:relative;display:grid;gap:.8cqi;justify-items:start;padding:3.4cqi;min-height:24cqi;background:linear-gradient(120deg,#111 55%,#2a2410);color:#fff;overflow:hidden}
.mk-md-bf__hero small{font:700 1.3cqi/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#D9C78E}
.mk-md-bf__hero .mk-t{font-size:3.6cqi;color:#fff}
.mk-md-bf__hero em{font:800 6cqi/1 var(--head);font-style:normal;color:#D9C78E;animation:mk-pulse 2.4s ease-in-out infinite}
.mk-md-bf__hero .mk-btn{background:#fff;color:#111}
.mk-md-bf__hero i{position:absolute;right:6%;top:18%;width:28%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#EFE2B4,#A08B34 70%);opacity:.9}
.mk-md-bf__mob{position:absolute;right:8%;top:14%;width:18%;aspect-ratio:9/16;border-radius:2cqi;padding:2cqi;display:grid;align-content:end;gap:.6cqi;background:linear-gradient(170deg,#2a2410,#111 60%);color:#fff;box-shadow:0 4cqi 9cqi -3cqi rgba(0,0,0,.45);overflow:hidden}
.mk-md-bf__mob small{font:700 1.1cqi/1 var(--body);color:#D9C78E;text-transform:uppercase;letter-spacing:.1em}
.mk-md-bf__mob em{font:800 3.6cqi/1 var(--head);font-style:normal;color:#fff}
.mk-md-bf__mob i{position:absolute;left:20%;top:12%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#EFE2B4,#A08B34 70%)}
.mk-md-mkt{right:24%;bottom:10%;width:22%;display:grid;gap:.9cqi;padding:1.8cqi;animation:mk-in 7s ease infinite both}
.mk-md-mkt i{aspect-ratio:1;border-radius:1.2cqi;background:linear-gradient(160deg,#f2f2f5,#e3e3e8)}
.mk-md-mkt .mk-l{height:.8cqi;border-radius:1cqi;background:#d2d2d7}
.mk-md-mkt b{font:700 1.8cqi/1 var(--head)}
.mk-md-mkt small{font:700 1.2cqi/1 var(--body);color:#2F6B3A}

/* design de thumbnails: YouTube-like grid */
.mk-md-yt{position:absolute;left:5%;right:5%;top:12%;display:grid;grid-template-columns:repeat(3,1fr);gap:2cqi;align-items:start}
.mk-md-yt__card{display:grid;gap:1cqi;padding:1.2cqi;border-radius:1.8cqi;transition:none}
.mk-md-yt__card.is-top{background:rgba(255,255,255,.08);box-shadow:0 0 0 .4cqi #B49A45;animation:mk-float 6s ease-in-out infinite}
.mk-md-yt__thumb{position:relative;aspect-ratio:16/9;border-radius:1.2cqi;overflow:hidden;display:flex;align-items:flex-end;padding:1.2cqi}
.mk-md-yt__card.a .mk-md-yt__thumb{background:linear-gradient(120deg,#c43c2c,#3a0f0b)}
.mk-md-yt__card.b .mk-md-yt__thumb{background:linear-gradient(120deg,#e0b13c,#3b2a06)}
.mk-md-yt__card.c .mk-md-yt__thumb{background:linear-gradient(120deg,#2c6fc4,#0b1d3a)}
.mk-md-yt__thumb b{position:relative;z-index:1;max-width:62%;font:800 2cqi/1.05 var(--head);color:#fff;text-transform:uppercase;text-shadow:0 .3cqi .8cqi rgba(0,0,0,.6)}
.mk-md-yt__thumb i{position:absolute;right:6%;bottom:0;width:40%;aspect-ratio:1;border-radius:50% 50% 0 0;background:radial-gradient(circle at 50% 35%,#f2c7a5 30%,#d9a37f 31% 45%,#1d1d1f 46%)}
.mk-md-yt__thumb small{position:absolute;right:4%;bottom:6%;z-index:2;font:700 1cqi/1 var(--body);padding:.4cqi .7cqi;border-radius:.6cqi;background:rgba(0,0,0,.8);color:#fff}
.mk-md-yt__card .mk-l{height:.9cqi;border-radius:1cqi;background:rgba(255,255,255,.35)}
.mk-md-yt__card .mk-l.s{width:60%;background:rgba(255,255,255,.18)}
.mk-md-yt__card em{justify-self:start;font:700 1.3cqi/1 var(--body);font-style:normal;padding:.8cqi 1.2cqi;border-radius:9cqi;background:#e3f0e5;color:#2F6B3A}

@media (prefers-reduced-motion:reduce){.mk-md-3d__obj{transform:rotateX(-12deg) rotateY(-28deg)}.mk-md-ba__img.after{clip-path:inset(0 0 0 50%)}.mk-md-ba__line{left:50%}.mk-md-vsl__cta{opacity:1}.mk-md-cam__view .flash{opacity:0}}

/* ── modelagem-3d: viewer with a wireframe product, delivery formats */
.mk-m3-view{left:7%;top:12%;width:58%;display:grid;gap:1.4cqi;padding:2.2cqi}
.mk-m3-view__bar{display:flex;justify-content:space-between;align-items:center;font:600 1.4cqi/1 var(--body);color:#1d1d1f}
.mk-m3-view__bar small{font-weight:500;color:#6e6e73}
.mk-m3-view__stage{aspect-ratio:4/3;border-radius:1.6cqi;background:repeating-linear-gradient(0deg,#ececf0 0 1px,transparent 1px 3cqi),repeating-linear-gradient(90deg,#ececf0 0 1px,#fafafa 1px 3cqi);display:grid;place-items:center}
.mk-m3-view__stage svg{width:72%;fill:none;stroke:#1d1d1f;stroke-width:.9;stroke-linejoin:round;stroke-linecap:round;animation:mk-m3-spin 7s ease-in-out infinite}
.mk-m3-view__stage svg .g{stroke:#B49A45;stroke-width:.6;stroke-dasharray:2 1.6;animation:sa-flowline 1.6s linear infinite}
@keyframes mk-m3-spin{0%,100%{transform:perspective(60cqi) rotateY(-18deg)}50%{transform:perspective(60cqi) rotateY(18deg)}}
.mk-m3-view__axes{position:relative;height:3cqi}
.mk-m3-view__axes i{position:absolute;left:1cqi;bottom:.5cqi;height:.4cqi;border-radius:1cqi}
.mk-m3-view__axes .x{width:4cqi;background:#d64545}
.mk-m3-view__axes .y{width:.4cqi;height:3cqi;background:#3aa35c}
.mk-m3-view__axes .z{width:3cqi;background:#3b6fd6;transform:rotate(-35deg);transform-origin:left center}
.mk-m3-fmt{position:absolute;right:6%;top:24%;display:grid;gap:1.2cqi}
.mk-m3-fmt span{padding:1.2cqi 2.2cqi;border-radius:1.2cqi;background:#fff;box-shadow:0 2cqi 5cqi -2cqi rgba(0,0,0,.25);font:700 1.5cqi/1 var(--body);letter-spacing:.06em;color:#7a6519;text-align:center}
.mk-m3-chip{left:6%;bottom:8%;animation:mk-st-toast 7s ease infinite}
@media (prefers-reduced-motion:reduce){.mk-m3-view__stage svg,.mk-m3-view__stage svg .g{animation:none}}

/* Sites e tecnologia · mockups conceituais (marcas fictícias) */
@keyframes mk-st-drawer{0%,10%{transform:translateX(12cqi);opacity:0}22%,86%{transform:none;opacity:1}100%{transform:translateX(12cqi);opacity:0}}
@keyframes mk-st-bar{0%,8%{transform:scaleY(.08)}40%,100%{transform:scaleY(1)}}
@keyframes mk-st-chat{0%{opacity:0;transform:translateY(1.5cqi)}8%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mk-st-dot{0%,60%,100%{opacity:.3}30%{opacity:1}}
@keyframes mk-st-wire{0%{top:0}100%{top:100%}}
@keyframes mk-st-live{0%{box-shadow:0 0 0 0 rgba(194,174,102,.7)}70%,100%{box-shadow:0 0 0 2.4cqi rgba(194,174,102,0)}}
@keyframes mk-st-tap{0%,8%,100%{transform:none;background:#ffffff}3%{transform:scale(.96);background:#f2f2f7}}
@keyframes mk-st-toast{0%,15%{transform:translateY(3cqi);opacity:0}25%,85%{transform:none;opacity:1}100%{opacity:0}}

/* ── lojas-virtuais · Casa Jacarandá */
.mk-st-shop{left:6%;top:7%;width:72%;height:68%}
.mk-st-shop__nav{display:flex;align-items:center;gap:2.4cqi;padding:2cqi 3cqi;border-bottom:1px solid #f2f2f7;font:600 1.6cqi/1 var(--body);color:#6e6e73}
.mk-st-shop__nav b{font-size:2.3cqi;margin-right:auto;color:#1d1d1f}
.mk-st-shop__nav em{font-style:normal;padding:.9cqi 1.6cqi;border-radius:9cqi;background:#1d1d1f;color:#ffffff}
.mk-st-pdp{display:grid;grid-template-columns:1fr 1fr;gap:3cqi;padding:3cqi}
.mk-st-pdp__gal .mk-ph{aspect-ratio:4/5}
.mk-st-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqi;margin-top:1.2cqi}
.mk-st-thumbs i{aspect-ratio:1;border-radius:1cqi}
.mk-st-pdp__info{display:flex;flex-direction:column;align-items:flex-start}
.mk-st-pdp__info small{font:700 1.4cqi/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#48484a}
.mk-st-pdp__info p{font-size:3.3cqi;margin:1.4cqi 0 2cqi}
.mk-st-pdp__info strong{font:600 3.4cqi/1 var(--head);letter-spacing:-.04em}
.mk-st-pix{margin:1cqi 0 2.2cqi;font:600 1.5cqi/1 var(--body);color:#48484a}
.mk-st-dots{display:flex;gap:1.2cqi;margin-bottom:2.6cqi}
.mk-st-dots i{width:3cqi;height:3cqi;border-radius:50%;background:#8e8e93;box-shadow:0 0 0 .5cqi #ffffff,0 0 0 .8cqi #1d1d1f}
.mk-st-dots i:nth-child(2){background:#3a3a3c;box-shadow:none}
.mk-st-dots i:nth-child(3){background:#d2d2d7;box-shadow:none}
.mk-st-pdp__info .mk-btn{font-size:1.6cqi}
.mk-st-cart{right:5%;top:24%;width:38%;display:grid;gap:1.8cqi;animation:mk-st-drawer 8s cubic-bezier(.22,1,.36,1) infinite}
.mk-st-cart b{font-size:2.6cqi}
.mk-st-item{display:flex;align-items:center;gap:1.6cqi}
.mk-st-item i{width:7cqi;height:7cqi;border-radius:1.2cqi;flex:none}
.mk-st-item span{display:grid;gap:.6cqi}
.mk-st-item em{font:700 1.7cqi/1 var(--body);font-style:normal}
.mk-st-item small{font:600 1.5cqi/1 var(--body);color:#6e6e73}
.mk-st-total{display:flex;justify-content:space-between;padding-top:1.6cqi;border-top:1px solid #d2d2d7;font:600 1.5cqi/1 var(--body);color:#6e6e73}
.mk-st-cart .mk-btn{font-size:1.6cqi}
.mk-st-paid{left:5%;bottom:17%;animation:mk-st-toast 8s ease infinite}

/* ── sistemas-web-e-saas · Treinora */
.mk-st-app{left:6%;top:7%;width:88%;height:74%;display:grid;grid-template-columns:15% 1fr;background:#f5f5f7}
.mk-st-side{background:#1d1d1f;padding:2.6cqi 1.6cqi;display:flex;flex-direction:column;align-items:center;gap:2.4cqi}
.mk-st-side b{color:#8e8e93;font-size:1.8cqi;margin-bottom:1.4cqi}
.mk-st-side i{width:4.4cqi;height:4.4cqi;border-radius:1.2cqi;background:rgba(255,253,249,.1)}
.mk-st-side i.on{background:#8e8e93}
.mk-st-main{padding:3cqi;display:grid;gap:2.2cqi;align-content:start}
.mk-st-top{display:flex;justify-content:space-between;align-items:center}
.mk-st-top p{font-size:3cqi}
.mk-st-top .mk-btn{font-size:1.5cqi;padding:1.2cqi 2cqi}
.mk-st-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqi}
.mk-st-kpis div{background:#ffffff;border-radius:1.6cqi;padding:2cqi;display:grid;gap:1cqi}
.mk-st-kpis small,.mk-st-chart small{font:600 1.4cqi/1 var(--body);color:#6e6e73}
.mk-st-kpis b{font-size:4cqi}
.mk-st-chart{background:#ffffff;border-radius:1.6cqi;padding:2cqi}
.mk-st-bars{display:flex;align-items:flex-end;gap:1.6cqi;height:13cqi;margin-top:1.6cqi}
.mk-st-bars i{flex:1;height:var(--h);border-radius:.8cqi .8cqi .3cqi .3cqi;background:#d2d2d7;transform-origin:bottom;animation:mk-st-bar 6s cubic-bezier(.22,1,.36,1) infinite alternate}
.mk-st-bars i:nth-child(6){background:#1d1d1f}
.mk-st-bars i:nth-child(2n){animation-delay:.15s}
.mk-st-table{background:#ffffff;border-radius:1.6cqi;padding:.6cqi 2cqi}
.mk-st-table div{display:grid;grid-template-columns:1fr 2fr auto;padding:1.3cqi 0;font:600 1.5cqi/1 var(--body);color:#6e6e73;border-bottom:1px solid #f2f2f7}
.mk-st-table div:last-child{border:0}
.mk-st-table em{font-style:normal;color:#1d1d1f}
.mk-st-toast{right:4%;bottom:15%;display:flex;align-items:center;gap:1.6cqi;padding:2cqi 2.6cqi}
.mk-st-av{width:5cqi;height:5cqi;border-radius:50%;flex:none;background:linear-gradient(140deg,#e8e8ed,#1d1d1f)}
.mk-st-toast span:last-child{display:grid;gap:.6cqi}
.mk-st-toast em{font:700 1.8cqi/1 var(--body);font-style:normal}
.mk-st-toast small{font:600 1.4cqi/1 var(--body);color:#6e6e73}

/* ── automacao-com-ia · Brisa Pet */
.mk-st-flow{left:6%;top:12%;width:42%;padding:3cqi;display:grid;gap:1.8cqi;background:#1d1d1f;color:#ffffff}
.mk-st-flow>small{font:700 1.4cqi/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#8e8e93;margin-bottom:.6cqi}
.mk-st-node{position:relative;z-index:1;display:flex;align-items:center;gap:1.6cqi;padding:1.8cqi;border-radius:1.4cqi;background:rgba(255,253,249,.07);border:1px solid rgba(255,253,249,.12);font:600 1.7cqi/1.2 var(--body)}
.mk-st-node i{display:grid;place-items:center;width:3.6cqi;height:3.6cqi;border-radius:1cqi;background:rgba(194,174,102,.18);color:#8e8e93;font:700 1.5cqi/1 var(--head);font-style:normal;flex:none}
.mk-st-node.on{background:#8e8e93;color:#1d1d1f;border-color:#8e8e93}
.mk-st-node.on i{background:#1d1d1f}
.mk-st-wire{position:absolute;left:4.8cqi;top:9cqi;bottom:6cqi;width:.3cqi;background:rgba(194,174,102,.3)}
.mk-st-wire b{position:absolute;left:50%;width:1.4cqi;height:1.4cqi;margin-left:-.7cqi;border-radius:50%;background:#8e8e93;box-shadow:0 0 1.6cqi #8e8e93;animation:mk-st-wire 2.6s ease-in-out infinite}
.mk-st-wa{right:8%;top:4%;width:38%;background:#f2f2f7}
.mk-st-wa__head{display:flex;align-items:center;gap:1.4cqi;padding:5cqi 2.2cqi 1.8cqi;background:#1d1d1f;color:#ffffff}
.mk-st-wa__head .mk-st-av{width:4cqi;height:4cqi}
.mk-st-wa__head span:last-child{display:grid;gap:.4cqi}
.mk-st-wa__head em{font:700 1.7cqi/1 var(--body);font-style:normal}
.mk-st-wa__head small{font:600 1.3cqi/1 var(--body);color:#8e8e93}
.mk-st-chat{padding:2cqi 1.8cqi;display:flex;flex-direction:column;gap:1.4cqi}
.mk-st-chat p{max-width:84%;padding:1.4cqi 1.8cqi;border-radius:1.8cqi;font:500 1.55cqi/1.35 var(--body);opacity:0;animation:mk-st-chat 9s ease infinite;animation-delay:var(--d)}
.mk-st-chat .me{align-self:flex-end;background:#ffffff;border-bottom-right-radius:.4cqi}
.mk-st-chat .bot{align-self:flex-start;background:#1d1d1f;color:#ffffff;border-bottom-left-radius:.4cqi}
.mk-st-typing{align-self:flex-start;display:flex;gap:.7cqi;padding:1.6cqi 2cqi;border-radius:1.8cqi;background:#1d1d1f}
.mk-st-typing i{width:1cqi;height:1cqi;border-radius:50%;background:#8e8e93;animation:mk-st-dot 1.2s infinite}
.mk-st-typing i:nth-child(2){animation-delay:.2s}
.mk-st-typing i:nth-child(3){animation-delay:.4s}
.mk-st-ai{left:6%;bottom:17%}

/* ── manutencao-de-sites · Vale Sereno Advocacia */
.mk-st-site{left:6%;top:7%;width:58%;height:46%;opacity:.9}
.mk-st-site__body{padding:3cqi;display:grid;gap:1.6cqi}
.mk-st-status{right:6%;top:24%;width:56%;padding:3.2cqi;display:grid;gap:1.8cqi}
.mk-st-status__head{display:flex;align-items:center;gap:1.8cqi;padding-bottom:1.8cqi;border-bottom:1px solid #f2f2f7}
.mk-st-live{width:2.4cqi;height:2.4cqi;border-radius:50%;background:#1d1d1f;flex:none;animation:mk-st-live 2s infinite}
.mk-st-status__head span:last-child{display:grid;gap:.6cqi}
.mk-st-status__head em{font:600 2.6cqi/1 var(--head);font-style:normal;letter-spacing:-.03em}
.mk-st-status__head small,.mk-st-status>small{font:600 1.4cqi/1 var(--body);color:#6e6e73}
.mk-st-uptime{display:flex;gap:.5cqi;height:4.4cqi}
.mk-st-uptime i{flex:1;border-radius:.4cqi;background:#8e8e93}
.mk-st-uptime i.warn{background:#d2d2d7}
.mk-st-checks{list-style:none;margin:0;padding:0;display:grid;gap:1.3cqi}
.mk-st-checks li{display:flex;align-items:center;gap:1.4cqi;font:600 1.7cqi/1 var(--body)}
.mk-st-checks svg{width:2.6cqi;height:2.6cqi;padding:.5cqi;border-radius:50%;background:#1d1d1f;color:#8e8e93;flex:none}
.mk-st-checks span{flex:1}
.mk-st-checks em{font-style:normal;color:#6e6e73;font-size:1.5cqi}
.mk-st-bk{left:6%;bottom:17%;animation:mk-st-toast 7s ease infinite}

/* ── bio-site · Ateliê Lume */
.mk-st-bio{left:31%;top:5%;width:38%;background:linear-gradient(180deg,#ffffff,#f5f5f7)}
.mk-st-bio__in{padding:7cqi 2.6cqi 2cqi;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.4cqi}
.mk-st-bio__av{width:10cqi;height:10cqi;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f5f5f7,#8e8e93 45%,#48484a);box-shadow:0 0 0 .6cqi #ffffff,0 0 0 .9cqi #8e8e93}
.mk-st-bio__in b{font-size:2.8cqi;margin-top:.6cqi}
.mk-st-bio__in small{font:500 1.45cqi/1.35 var(--body);color:#6e6e73;margin-bottom:1cqi}
.mk-st-link{width:100%;padding:1.8cqi;border-radius:1.6cqi;background:#ffffff;border:1px solid #d2d2d7;font:700 1.55cqi/1 var(--body);animation:mk-st-tap 4s ease infinite;animation-delay:var(--d)}
.mk-st-link:first-of-type{background:#1d1d1f;color:#ffffff;border-color:#1d1d1f;animation:none}
.mk-st-soc{display:flex;gap:1.4cqi;margin-top:.6cqi}
.mk-st-soc i{width:3.6cqi;height:3.6cqi;border-radius:1cqi;background:#d2d2d7}
.mk-st-qr{right:7%;top:16%;width:22%;display:grid;gap:1.4cqi;justify-items:center}
.mk-st-qr__code{display:grid;grid-template-columns:repeat(5,1fr);gap:.5cqi;width:100%;aspect-ratio:1}
.mk-st-qr__code i{border-radius:.3cqi;background:#f2f2f7}
.mk-st-qr__code i.on{background:#1d1d1f}
.mk-st-qr small{font:700 1.4cqi/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#6e6e73}
.mk-st-canva{left:6%;bottom:22%}

/* ── blindagem-de-sites · Clínica Ponte Alta: the warning fades as the scan cleans the site */
.mk-st-hit{overflow:hidden}
.mk-st-alert{display:flex;align-items:center;gap:1.4cqi;padding:1.6cqi 2.4cqi;background:#b3261e;color:#fff;font:600 1.7cqi/1 var(--body);animation:mk-st-alert 7s ease infinite}
.mk-st-alert b{width:2.6cqi;height:2.6cqi;border-radius:50%;background:#fff;color:#b3261e;display:grid;place-items:center;font:800 1.8cqi/1 var(--body);flex:none}
@keyframes mk-st-alert{0%,30%{opacity:1;max-height:8cqi}45%,90%{opacity:0;max-height:0;padding-block:0}100%{opacity:1;max-height:8cqi}}
.mk-st-shield{width:4.6cqi;height:4.6cqi;border-radius:1.4cqi;background:#1d1d1f;color:#D9C78E;display:grid;place-items:center;flex:none}
.mk-st-shield svg{width:60%;height:60%}
.mk-st-scanbar{height:1.2cqi;border-radius:2cqi;background:#f2f2f7;overflow:hidden}
.mk-st-scanbar i{display:block;height:100%;background:linear-gradient(90deg,#D9C78E,#A08B34);transform-origin:0 50%;animation:mk-grow 7s ease-in-out infinite}
.mk-st-scan .mk-st-checks li{animation:mk-in 7s ease infinite both}
.mk-st-scan .mk-st-checks li:nth-child(2){animation-delay:.3s}.mk-st-scan .mk-st-checks li:nth-child(3){animation-delay:.6s}.mk-st-scan .mk-st-checks li:nth-child(4){animation-delay:.9s}
@media (prefers-reduced-motion:reduce){.mk-st-alert{display:none}}

/* Leque da home com capas de identidade visual: a imagem preenche o cartão. */
.mk--capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Celular: o leque de cartas vira carrossel horizontal com encaixe (sem a animação de abrir). */
@media (max-width:760px){
  .fan{height:auto;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:18px;padding:8px 18px 36px;margin-top:32px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fan::-webkit-scrollbar{display:none}
  .fan-sec .fan .fan__card,.fan-sec .fan .fan__card.is-edge{position:static;display:block;flex:0 0 min(72vw,300px);width:auto;margin:0;transform:none!important;scroll-snap-align:center}
  .fan-sec .fan .fan__card .fan__label,.fan-sec .fan .fan__card:not(.is-center) .fan__label{position:static;transform:none;display:block;margin-top:14px;white-space:normal;text-align:center;opacity:1!important}
}

/* Paginação do carrossel (celular): pílula com pontos; o ativo vira uma barra que enche; botão de pausar/tocar ao lado. */
.fan-pager{display:none}
@media (max-width:760px){
  .fan-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px auto 0}
  .fan-pager__pilula{display:flex;align-items:center;gap:14px;height:44px;padding:0 18px;border-radius:999px;background:#ececf1}
  .fan-pager__ponto{position:relative;display:grid;place-items:center;width:8px;height:24px;padding:0;border:0;background:none;cursor:pointer;transition:width .45s cubic-bezier(.22,1,.36,1)}
  .fan-pager__ponto::before{content:"";position:absolute;inset:0 -6px}
  .fan-pager__ponto i{position:relative;display:block;width:100%;height:8px;border-radius:999px;background:#76767b;overflow:hidden}
  .fan-pager__ponto i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#1d1d1f;transform:scaleX(var(--p,0));transform-origin:left}
  .fan-pager__ponto[aria-current="true"]{width:44px}
  .fan-pager__ponto[aria-current="true"] i{background:rgba(118,118,123,.55)}
  .fan-pager.is-pausado .fan-pager__ponto[aria-current="true"] i{background:#1d1d1f}
  .fan-pager.is-pausado .fan-pager__ponto[aria-current="true"] i::after{transform:none;opacity:0}
  .fan-pager__play{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#ececf1;color:#1d1d1f;cursor:pointer}
  .fan-pager__play svg{width:18px;height:18px;fill:currentColor}
  .fan-pager__ic-tocar,.fan-pager.is-pausado .fan-pager__ic-pausar{display:none}
  .fan-pager.is-pausado .fan-pager__ic-tocar{display:block}
  .fan-pager__ponto:focus-visible,.fan-pager__play:focus-visible{outline:2px solid #1d1d1f;outline-offset:3px;border-radius:999px}
}
@media (prefers-reduced-motion:reduce){.fan-pager__ponto{transition:none}}

/* ───────── process slider (tabs + arrows + progress) ───────── */
.flow__bar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}
.flow__tabs{display:flex;gap:4px;padding:6px;border-radius:999px;background:var(--bg-2);overflow-x:auto;scrollbar-width:none;max-width:100%}
.flow__tabs::-webkit-scrollbar{display:none}
.flow__tabs button{flex:none;display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:12px 18px;border-radius:999px;font:600 15px/1 var(--body);color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:background-color .35s var(--ease),color .3s,box-shadow .35s}
.flow__tabs button small{font:600 12px/1 var(--head);color:var(--gold-text)}
.flow__tabs button:hover{color:var(--ink)}
.flow__tabs button[aria-current=step]{background:var(--card);color:var(--ink);box-shadow:0 2px 10px -4px rgba(0,0,0,.25)}
.flow__nav{display:flex;gap:10px;flex:none}
.flow__nav button{width:54px;height:54px;border-radius:50%;border:0;background:var(--bg-2);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background-color .3s,color .3s,opacity .3s}
.flow__nav button:hover{background:var(--ink);color:var(--gold-2)}
.flow__nav button:disabled{opacity:.35;pointer-events:none}
.flow__nav svg{width:20px;height:20px}
.flow__nav .js-prev svg{transform:rotate(90deg)}
.flow__nav .js-next svg{transform:rotate(-90deg)}
.flow__track{list-style:none;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 8px;display:grid;grid-auto-flow:column;grid-auto-columns:min(340px,78vw);grid-template-rows:auto auto auto 1fr;gap:0 22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.flow__track::-webkit-scrollbar{display:none}
.flow__track.is-drag{cursor:grabbing;scroll-snap-type:none}
.flow__track.is-drag *{pointer-events:none}
/* cada etapa ocupa 4 linhas da trilha (arte, número, título, descrição): a trilha alinha as linhas de todos os cards, sem zigue-zague */
.flow__slide{scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 4;row-gap:0;min-width:0}
.flow__slide>.flow__art{grid-row:1}.flow__slide>.flow__n{grid-row:2}.flow__slide>h3{grid-row:3}.flow__slide>p{grid-row:4}
@supports not (grid-template-rows:subgrid){.flow__slide{display:flex;flex-direction:column}.flow__slide h3{min-height:2.3em}}
.flow__slide h3{font-size:clamp(24px,2.2vw,30px);margin:8px 0 10px;color:var(--ink)}
.flow__slide p{color:var(--ink-2);font-size:15.5px}
.flow__slide .step__d{align-self:flex-start;margin-top:16px}
.flow__n{margin-top:22px;font:600 14px/1 var(--head);color:var(--gold-text)}
.motion .flow__slide:not(.is-active) .flow__art{transform:scale(.97)}
.flow__foot{display:flex;align-items:center;gap:24px;margin-top:34px}
.flow__progress{position:relative;flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.flow__progress i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(.1)}
.flow__hint{font-size:13.5px;color:var(--ink-3);white-space:nowrap}
@media (max-width:760px){.flow__nav{display:none}.flow__tabs button{padding:11px 14px;font-size:14px}}

/* step illustrations (built from the mockup primitives) */
.flow__art{position:relative;container-type:inline-size;width:100%;aspect-ratio:4/4.6;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,#fbfbfd,#ececf0);display:grid;place-items:center;transition:transform .6s var(--ease)}
.flow__art.is-dark{background:radial-gradient(120% 90% at 30% 0%,#2c2c2e,#1d1d1f 70%)}
.flow__art .mk-l{height:3.2cqi;border-radius:4cqi;display:block}
.flow__art .mk-t{font-size:6.4cqi}
.flow__art .mk-btn{font-size:4cqi;padding:3.4cqi 5cqi;border-radius:3cqi;margin-top:2cqi}
.flow__art .mk-chip{font-size:4cqi;padding:3.2cqi 4.6cqi;gap:2.4cqi;left:8%;bottom:8%;animation:mk-float 5s ease-in-out infinite}
.flow__art .mk-chip b{width:3cqi;height:3cqi}
.sa-paper{width:74%;background:#ffffff;border-radius:5cqi;padding:7cqi 6cqi;display:grid;gap:3.6cqi;box-shadow:0 8cqi 16cqi -8cqi rgba(0,0,0,.45);animation:mk-float 6s ease-in-out infinite}
.sa-rows{display:grid;grid-template-columns:1fr auto;gap:3cqi 6cqi;padding:4cqi 0;border-block:1px solid #d2d2d7}
.sa-rows span{display:block;width:30cqi}.sa-rows span:nth-child(even){width:14cqi}
.sa-total small{display:block;font:600 3.2cqi/1 var(--body);color:#6e6e73;margin-bottom:2.4cqi}
.sa-sig{width:60%;height:auto;margin:2cqi 0}
.sa-sig path{fill:none;stroke:#1d1d1f;stroke-width:2;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:sa-draw 4s ease-in-out infinite}
@keyframes sa-draw{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.sa-q{display:flex;align-items:center;gap:3cqi}
.sa-q i{flex:none;width:5cqi;height:5cqi;border-radius:1.4cqi;border:.6cqi solid #8e8e93}
.sa-q i.on{background:#1d1d1f;border-color:#1d1d1f}
.sa-field{padding:3.4cqi;border-radius:2.4cqi;border:1px solid #d2d2d7}
.sa-phone{width:62%;aspect-ratio:9/15;background:#e8e8ed;border:2.2cqi solid #0b0b0c;border-radius:9cqi;padding:12cqi 4cqi 4cqi;display:flex;flex-direction:column;gap:3cqi;box-shadow:0 10cqi 18cqi -8cqi rgba(0,0,0,.55);animation:mk-float 6s ease-in-out infinite}
.sa-b{max-width:84%;padding:3.6cqi 4cqi;border-radius:4cqi;font:500 3.6cqi/1.35 var(--body);display:grid;gap:2cqi;animation:mk-in 7s ease infinite both}
.sa-b.in{background:#ffffff;align-self:flex-start;border-bottom-left-radius:1cqi}
.sa-b.out{background:#8e8e93;color:#1d1d1f;align-self:flex-end;border-bottom-right-radius:1cqi}
.sa-b:nth-child(2){animation-delay:.6s}.sa-b:nth-child(3){animation-delay:1.2s}
.sa-typing{display:flex;gap:1.6cqi;padding:3cqi 4cqi;background:#ffffff;border-radius:4cqi;align-self:flex-start}
.sa-typing i{width:2.2cqi;height:2.2cqi;border-radius:50%;background:#aeaeb2;animation:mk-pulse 1.2s infinite}
.sa-typing i:nth-child(2){animation-delay:.2s}.sa-typing i:nth-child(3){animation-delay:.4s}
.sa-board{width:80%;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;gap:4cqi}
.sa-board>*{border-radius:5cqi;box-shadow:0 6cqi 12cqi -6cqi rgba(0,0,0,.4)}
.sa-board>:nth-child(1){animation:mk-float 6s ease-in-out infinite}
.sa-board>:nth-child(4){animation:mk-float 6s ease-in-out infinite -3s}
.flow__art .sa-aa{display:grid;place-items:center;background:#ffffff;font-size:18cqi;color:#1d1d1f}
.sa-sw{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqi;padding:4cqi;background:#ffffff}
.sa-sw i{border-radius:2.4cqi}
.sa-sw i:nth-child(1){background:#1d1d1f}.sa-sw i:nth-child(2){background:#1d1d1f}.sa-sw i:nth-child(3){background:#8e8e93}.sa-sw i:nth-child(4){background:#e8e8ed}
.sa-win{width:80%;background:#ffffff;border-radius:4cqi;overflow:hidden;box-shadow:0 10cqi 18cqi -8cqi rgba(0,0,0,.55);animation:mk-float 6s ease-in-out infinite}
.sa-win .mk-win__bar{padding:3.4cqi 4cqi;gap:2cqi}.sa-win .mk-win__bar i{width:2.6cqi;height:2.6cqi}
.sa-code{padding:6cqi;display:grid;gap:3.4cqi}
.sa-code .mk-l{animation:sa-type 5s ease infinite both;transform-origin:0 50%}
.sa-code .mk-l:nth-child(2){animation-delay:.3s}.sa-code .mk-l:nth-child(3){animation-delay:.6s}.sa-code .mk-l:nth-child(4){animation-delay:.9s}.sa-code .mk-l:nth-child(5){animation-delay:1.2s}.sa-code .mk-l:nth-child(6){animation-delay:1.5s}
@keyframes sa-type{0%{transform:scaleX(0)}25%,90%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:.4}}
.sa-bar{margin:0 6cqi 6cqi;height:2.4cqi;border-radius:2cqi;background:#e8e8ed;overflow:hidden}
.sa-bar i{display:block;height:100%;background:#1d1d1f;transform-origin:0 50%;animation:mk-grow 5s ease-in-out infinite}
.sa-page{position:relative}
.sa-pin{position:absolute;width:8cqi;height:8cqi;border-radius:50% 50% 50% 0;background:#1d1d1f;color:#1d1d1f;display:grid;place-items:center;font:700 3.6cqi/1 var(--body);transform:rotate(-45deg)}
.sa-live{display:inline-flex;align-items:center;gap:2.4cqi;font:700 4cqi/1 var(--body);color:#2F6B3A}
.sa-live i{width:3.4cqi;height:3.4cqi;border-radius:50%;background:#3E9150;animation:mk-pulse 1.6s infinite}
.sa-chart{width:100%;height:auto}
.sa-chart path{fill:none;stroke:#1d1d1f;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160;animation:sa-draw 5s ease-in-out infinite}
.flow:not(.is-live) .flow__art *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.flow__art *{animation:none!important}.sa-sig path,.sa-chart path{stroke-dashoffset:0}}

/* ───────── fan of conceptual projects (landonorris-style) ───────── */
@property --lift{syntax:'<length>';inherits:false;initial-value:0px}
@property --s{syntax:'<number>';inherits:false;initial-value:1}
.fan{--spread:1;--gap:min(15vw,200px);--cw:min(330px,46vw);position:relative;height:calc(var(--cw) * 1.25 + 120px);margin-top:clamp(40px,6vw,80px)}
.fan__card{position:absolute;left:50%;top:30px;width:var(--cw);margin-left:calc(var(--cw) / -2);text-decoration:none;transform-origin:50% 120%;
  transform:translateX(calc(var(--k) * var(--gap) * var(--spread))) translateY(calc(var(--k2) * 16px * var(--spread) + var(--lift))) rotate(calc(var(--k) * 7deg * var(--spread))) scale(var(--s));
  transition:--lift .5s var(--ease),--s .5s var(--ease)}
.fan__card .mk{max-width:none;border-radius:28px;box-shadow:0 30px 60px -30px rgba(0,0,0,.55);transition:box-shadow .5s var(--ease)}
.fan__card:hover,.fan__card:focus-visible{--lift:-34px;--s:1.05;z-index:20!important}
.fan__card:hover .mk{box-shadow:0 50px 80px -30px rgba(0,0,0,.6)}
.fan__label{position:absolute;left:50%;bottom:-46px;transform:translateX(-50%);white-space:nowrap;text-align:center;font-size:13px;color:var(--ink-3);opacity:0;transition:opacity .4s}
.fan__label b{display:block;font:600 16px/1.3 var(--head);color:var(--ink)}
.fan__card:hover .fan__label,.fan__card:focus-visible .fan__label{opacity:1}
@media (max-width:760px){.fan{--gap:min(13vw,90px);--cw:min(230px,58vw)}.fan__card.is-edge{display:none}.fan__card:not(.is-center) .fan__label{opacity:0}.fan__card.is-center .fan__label{opacity:1}}
.sa-rows span:nth-child(even) .mk-l{width:100%!important}

.sa-pin{color:#fff}
.sa-b.out{background:#1d1d1f;color:#fff}

/* ───────── step illustrations for Automação com IA: time map, proposal, knowledge base, flow graph, test chat, live monitor ───────── */
.flow__art .sa-ai-chip{animation:sa-ai-chip 7s ease infinite}
@keyframes sa-ai-chip{0%,40%{opacity:0;transform:translateY(3cqi)}50%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(3cqi)}}

/* diagnóstico: where the time goes, the biggest task gets picked */
.sa-time{gap:3cqi}
.sa-tk{display:grid;grid-template-columns:1fr auto;row-gap:1.4cqi;font:500 3.3cqi/1.2 var(--body);color:#1d1d1f;padding:1.6cqi 2cqi;margin:0 -2cqi;border-radius:2.4cqi}
.sa-tk em{font:600 3cqi/1.2 var(--body);font-style:normal;color:#86868b}
.sa-tk i{grid-column:1/-1;height:2cqi;border-radius:2cqi;background:#d2d2d7;width:var(--w);transform-origin:0 50%;animation:sa-tk-grow 7s ease infinite}
.sa-tk:nth-child(3) i{animation-delay:.15s}.sa-tk:nth-child(4) i{animation-delay:.3s}.sa-tk:nth-child(5) i{animation-delay:.45s}
.sa-tk.is-pick{animation:sa-tk-pick 7s ease infinite}
.sa-tk.is-pick i{background:#d2d2d7;animation-name:sa-tk-grow,sa-tk-gold}
@keyframes sa-tk-grow{0%{transform:scaleX(0)}25%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes sa-tk-gold{0%,38%{background:#d2d2d7}46%,92%{background:#B49A45}100%{background:#d2d2d7}}
@keyframes sa-tk-pick{0%,38%{background:transparent}46%,92%{background:#f5f0e1}100%{background:transparent}}

/* proposta: flow sketch, costs and terms on paper */
.sa-mini{display:flex;align-items:center;padding:2cqi 0}
.sa-mini i{width:7cqi;height:7cqi;border-radius:2cqi;background:#1d1d1f}
.sa-mini i.g{background:linear-gradient(135deg,#EFE2B4,#A08B34);animation:mk-pulse 2.4s ease-in-out infinite}
.sa-mini s{flex:1;height:.5cqi;background:repeating-linear-gradient(90deg,#86868b 0 1.4cqi,transparent 1.4cqi 2.6cqi);background-size:2.6cqi 100%;animation:sa-dash 1.2s linear infinite}
@keyframes sa-dash{to{background-position:2.6cqi 0}}
.sa-row2{display:flex;align-items:center;justify-content:space-between;gap:3cqi;font:500 3.2cqi/1.2 var(--body);color:#1d1d1f;padding-bottom:2cqi;border-bottom:1px solid #f0f0f2;animation:mk-in 7s ease infinite both}
.sa-row2 .mk-l{flex:none}
.sa-row2:nth-of-type(3){animation-delay:.3s}.sa-row2:nth-of-type(4){animation-delay:.6s}

/* base de conhecimento: topics drop into the agent's base */
.sa-kb{width:76%;display:grid;gap:5cqi;justify-items:center}
.sa-kb__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:2cqi}
.sa-kb__chips span{padding:2.2cqi 3.4cqi;border-radius:9cqi;background:#fff;font:600 3.2cqi/1 var(--body);color:#1d1d1f;box-shadow:0 3cqi 6cqi -3cqi rgba(0,0,0,.3);animation:sa-kb-drop 7s ease infinite both}
.sa-kb__chips span:nth-child(2){animation-delay:.35s}.sa-kb__chips span:nth-child(3){animation-delay:.7s}.sa-kb__chips span:nth-child(4){animation-delay:1.05s}
@keyframes sa-kb-drop{0%{opacity:0;transform:translateY(-4cqi)}8%,50%{opacity:1;transform:none}62%,100%{opacity:0;transform:translateY(14cqi) scale(.8)}}
.sa-kb__base{width:100%;display:grid;justify-items:center;gap:2.6cqi;padding:6cqi 5cqi;border-radius:5cqi;background:#fff;box-shadow:0 8cqi 16cqi -8cqi rgba(0,0,0,.45)}
.sa-kb__base svg{width:12cqi;height:12cqi;fill:none;stroke:#A08B34;stroke-width:1.6;animation:sa-kb-glow 7s ease infinite}
@keyframes sa-kb-glow{0%,50%{transform:none}58%{transform:scale(1.12)}66%,100%{transform:none}}
.flow__art .sa-kb__base .mk-t{font-size:4.6cqi}
.sa-kb__base .sa-bar{width:100%;margin:0}
.sa-kb__base .sa-bar i{background:linear-gradient(90deg,#D9C78E,#A08B34);animation-duration:7s}

/* construção dos fluxos: the agent connected to the tools, data moving */
.sa-graph{position:relative;width:84%;aspect-ratio:1/.92}
.sa-graph svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sa-graph path{fill:none;stroke:#A08B34;stroke-width:1.6;stroke-dasharray:2 2.4;vector-effect:non-scaling-stroke;animation:sa-flowline 1.4s linear infinite}
@keyframes sa-flowline{to{stroke-dashoffset:-8.8}}
.sa-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:1.8cqi;padding:3cqi 4cqi;border-radius:3cqi;background:#fff;font:600 3.4cqi/1 var(--body);color:#1d1d1f;white-space:nowrap;box-shadow:0 4cqi 8cqi -4cqi rgba(0,0,0,.3)}
.sa-node.n1{left:18%;top:50%}
.sa-node.n2{left:50%;top:50%;background:#1d1d1f;color:#fff;padding:4cqi 4.6cqi;animation:mk-pulse 2.8s ease-in-out infinite}
.sa-node.n2 i{width:3cqi;height:3cqi;border-radius:50%;background:linear-gradient(135deg,#EFE2B4,#A08B34)}
.sa-node.n3{left:84%;top:26%;animation:sa-node-hit 2.8s ease infinite}
.sa-node.n4{left:84%;top:74%;animation:sa-node-hit 2.8s ease infinite 1.4s}
@keyframes sa-node-hit{0%,60%,100%{box-shadow:0 4cqi 8cqi -4cqi rgba(0,0,0,.3)}70%{box-shadow:0 0 0 .8cqi rgba(180,154,69,.45)}}
.sa-env{position:absolute;left:50%;top:4%;transform:translateX(-50%);padding:1.8cqi 3.2cqi;border-radius:9cqi;border:1px dashed #A08B34;font:600 2.8cqi/1 var(--body);color:#7a6519;white-space:nowrap}

/* testes reais: a hard question, a reply that respects the limits */
.sa-aitest .sa-b{animation:mk-in 7s ease infinite both}
.sa-aitest .sa-b.out{animation-delay:.9s}
.sa-guard{display:flex;align-items:center;gap:2.4cqi;justify-self:start;padding:2cqi 3cqi;border-radius:9cqi;background:#fff;font:600 3cqi/1 var(--body);color:#1d1d1f;animation:mk-in 7s ease infinite both;animation-delay:1.8s}
.sa-guard i{width:4.4cqi;height:4.4cqi;border-radius:50%;background:#3E9150;position:relative}
.sa-guard i::after{content:"";position:absolute;left:50%;top:20%;width:1.2cqi;height:2cqi;border:solid #fff;border-width:0 .5cqi .5cqi 0;transform:translateX(-50%) rotate(45deg)}

/* lançamento e ajuste: live conversations being followed and refined */
.sa-ailive{gap:3cqi}
.sa-conv{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2.6cqi;padding:2.6cqi 3cqi;border-radius:3cqi;background:#f5f5f7;font:500 3.2cqi/1.2 var(--body);color:#1d1d1f;animation:mk-in 7s ease infinite both}
.sa-conv:nth-of-type(3){animation-delay:.35s}.sa-conv:nth-of-type(4){animation-delay:.7s}
.sa-conv b{width:5cqi;height:5cqi;border-radius:50%;background:#d2d2d7}
.sa-conv em{font:600 2.6cqi/1 var(--body);font-style:normal;padding:1.4cqi 2cqi;border-radius:9cqi;background:#e3f0e5;color:#2F6B3A}
.sa-conv.adj em{background:#f5f0e1;color:#7a6519}

@media (prefers-reduced-motion:reduce){.sa-tk i{transform:none}.sa-tk.is-pick{background:#f5f0e1}.sa-tk.is-pick i{background:#B49A45}.sa-kb__chips span,.flow__art .sa-ai-chip{opacity:1;transform:none}}

/* home process: diagnosis → proposal, contract → briefing, creation → approval, delivery → results */
.sa-duo{position:relative;width:80%;aspect-ratio:1/.98}
.sa-duo .sa-paper{position:absolute;width:76%;animation:none;padding:6cqi 5.4cqi;gap:3cqi}
.sa-duo .back{left:0;top:0;transform:rotate(-4deg);opacity:.92}
.sa-duo .front{right:0;bottom:0;animation:sa-duo-in 7s ease infinite both}
@keyframes sa-duo-in{0%,22%{opacity:0;transform:translate(6cqi,8cqi)}34%,90%{opacity:1;transform:none}100%{opacity:0;transform:translate(6cqi,8cqi)}}
.sa-duo .sa-check{font:500 3.3cqi/1.2 var(--body);color:#1d1d1f}
.sa-duo .sa-rv{font-size:3.3cqi}
.sa-duo .sa-rv i,.sa-duo .sa-rv i::after{animation-delay:2.4s}
.sa-duo .sa-rv:nth-child(3) i,.sa-duo .sa-rv:nth-child(3) i::after{animation-delay:2.8s}
.sa-duo .sa-rv:nth-child(4) i,.sa-duo .sa-rv:nth-child(4) i::after{animation-delay:3.2s}
.sa-duo .sa-rv:nth-child(5) i,.sa-duo .sa-rv:nth-child(5) i::after{animation-delay:3.6s}
.sa-duo .sa-sig{width:70%}
.sa-approve{position:relative}
.sa-approve .sa-pin{left:30%;top:16%;animation:sa-pin-pop 7s ease infinite}
@keyframes sa-pin-pop{0%,10%{opacity:0;transform:rotate(-45deg) scale(.4)}18%,36%{opacity:1;transform:rotate(-45deg) scale(1)}44%,100%{opacity:0;transform:rotate(-45deg) scale(.4)}}
.sa-track{gap:3.4cqi}
.sa-track .sa-kpi small{display:block;font:600 2.8cqi/1 var(--body);color:#86868b}
.flow__art .sa-track .sa-kpi .mk-t{font-size:5.6cqi;color:#2F6B3A}
.sa-track .sa-bars{height:18cqi}
@media (prefers-reduced-motion:reduce){.sa-duo .front{opacity:1;transform:none}}
.sa-ailive{width:82%;padding:6cqi 5cqi}
.sa-conv{gap:2.2cqi;padding:2.4cqi 2.6cqi;font-size:3cqi;min-width:0}
.sa-conv span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-conv em{font-size:2.4cqi;padding:1.2cqi 1.8cqi}

/* blindagem de sites: scan finds threats, cleaning strikes them out, shield layers tick on, report */
.sa-sec{gap:2.8cqi}
.sa-sec .sa-bar{margin:0}
.sa-sec .sa-bar i{background:linear-gradient(90deg,#D9C78E,#A08B34);animation-duration:7s}
.sa-file2{display:flex;align-items:center;justify-content:space-between;gap:2cqi;padding:2.2cqi 2.6cqi;border-radius:2.4cqi;background:#f5f5f7;font:500 3cqi/1.2 var(--body);color:#1d1d1f;animation:mk-in 7s ease infinite both}
.sa-file2:nth-of-type(3){animation-delay:.4s}.sa-file2:nth-of-type(4){animation-delay:.8s}.sa-file2:nth-of-type(5){animation-delay:1.2s}
.sa-file2 span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-file2 em{flex:none;font:600 2.4cqi/1 var(--body);font-style:normal;padding:1.2cqi 1.8cqi;border-radius:9cqi;background:#e3f0e5;color:#2F6B3A}
.sa-file2.bad em{background:#fbe4e2;color:#b3261e}
.sa-file2.warn em{background:#f5f0e1;color:#7a6519}
.sa-del{display:flex;align-items:center;gap:2.6cqi;padding:2.2cqi 2.6cqi;border-radius:2.4cqi;background:#fbe4e2;font:500 3.1cqi/1.2 var(--body);color:#1d1d1f;animation:sa-del 7s ease infinite}
.sa-del:nth-of-type(3){animation-delay:.4s}.sa-del:nth-of-type(4){animation-delay:.8s}.sa-del:nth-of-type(5){animation-delay:1.2s}
.sa-del i{flex:none;width:4.4cqi;height:4.4cqi;border-radius:50%;background:#b3261e;position:relative;animation:sa-del-i 7s ease infinite;animation-delay:inherit}
.sa-del i::before,.sa-del i::after{content:"";position:absolute;left:50%;top:50%;width:2.2cqi;height:.5cqi;background:#fff;border-radius:1cqi;transform:translate(-50%,-50%) rotate(45deg)}
.sa-del i::after{transform:translate(-50%,-50%) rotate(-45deg)}
.sa-del span{position:relative;animation-delay:inherit}
.sa-del span::after{content:"";position:absolute;left:0;top:55%;height:.4cqi;width:100%;background:#86868b;transform-origin:0 50%;animation:sa-strike 7s ease infinite;animation-delay:inherit}
@keyframes sa-del{0%,20%{background:#fbe4e2;opacity:1}32%,88%{background:#f5f5f7;opacity:.55}100%{background:#fbe4e2;opacity:1}}
@keyframes sa-del-i{0%,20%{background:#b3261e}32%,88%{background:#86868b}100%{background:#b3261e}}
@keyframes sa-strike{0%,22%{transform:scaleX(0)}32%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.sa-shield{justify-items:start}
.sa-shield__ico{justify-self:center;width:18cqi;height:18cqi;border-radius:5cqi;background:#1d1d1f;color:#D9C78E;display:grid;place-items:center;margin-bottom:2cqi;animation:mk-pulse 3s ease-in-out infinite}
.sa-shield__ico svg{width:58%;height:58%}
.sa-shield .sa-rv{font-size:3.3cqi}
.sa-sec .sa-kpi small{display:block;font:600 2.6cqi/1.2 var(--body);color:#86868b;margin-bottom:1cqi}
.flow__art .sa-sec .sa-kpi .mk-t{font-size:6cqi}
@media (prefers-reduced-motion:reduce){.sa-del{background:#f5f5f7;opacity:.55}.sa-del i{background:#86868b}.sa-del span::after{transform:scaleX(1)}}

/* ───────── step illustrations for Criação de aplicativos ───────── */
/* prototype: three wireframe screens linked by flow arrows */
.sa-proto{width:88%;display:flex;align-items:center;justify-content:center;gap:1.4cqi}
.sa-proto__ph{position:relative;flex:none;width:22cqi;aspect-ratio:9/17;border-radius:3cqi;border:.5cqi solid #1d1d1f;background:#fff;padding:3.4cqi 2cqi 2cqi;display:flex;flex-direction:column;gap:1.4cqi;box-shadow:0 5cqi 10cqi -6cqi rgba(0,0,0,.4);animation:mk-in 7s ease infinite both}
.sa-proto__ph:nth-of-type(2){animation-delay:.5s}.sa-proto__ph:nth-of-type(3){animation-delay:1s}
.sa-proto__ph small{font:700 1.8cqi/1 var(--body);color:#7a6519}
.sa-proto__ph .mk-l{height:1.2cqi;background:#e3e3e8}
.sa-proto__ph i{margin-top:auto;height:4cqi;border-radius:1.2cqi;border:.3cqi dashed #86868b}
.sa-proto__ph b{position:absolute;left:50%;top:44%;width:7cqi;height:7cqi;margin-left:-3.5cqi;border-radius:50%;background:#3E9150}
.sa-proto__ph b::after{content:"";position:absolute;left:50%;top:24%;width:1.6cqi;height:3cqi;border:solid #fff;border-width:0 .6cqi .6cqi 0;transform:translateX(-50%) rotate(45deg)}
.sa-proto__arrow{flex:none;width:4cqi;height:.5cqi;background:#B49A45;position:relative;animation:mk-in 7s ease infinite both;animation-delay:.3s}
.sa-proto__arrow::after{content:"";position:absolute;right:-.4cqi;top:50%;width:1.6cqi;height:1.6cqi;border:solid #B49A45;border-width:.5cqi .5cqi 0 0;transform:translateY(-50%) rotate(45deg)}

/* build: the screen assembles while sprint cycles complete */
.sa-apbuild{width:84%;display:flex;align-items:center;gap:5cqi;justify-content:center}
.sa-apbuild__ph{flex:none;width:30cqi;aspect-ratio:9/18;border-radius:4.4cqi;background:#0b0b0c;padding:1.2cqi;box-shadow:0 8cqi 16cqi -8cqi rgba(0,0,0,.5)}
.sa-apbuild__scr{height:100%;border-radius:3.4cqi;background:#f5f5f7;padding:5cqi 2.4cqi 2.4cqi;display:flex;flex-direction:column;gap:1.8cqi}
.sa-apbuild__scr i{height:6cqi;border-radius:1.6cqi;background:#fff;box-shadow:0 .6cqi 1.4cqi -.6cqi rgba(0,0,0,.2);transform-origin:0 50%;animation:sa-ap-build 7s ease infinite both}
.sa-apbuild__scr i:nth-of-type(2){animation-delay:.6s}.sa-apbuild__scr i:nth-of-type(3){animation-delay:1.2s}
.sa-apbuild__scr span{margin-top:auto;height:5cqi;border-radius:1.6cqi;background:#1d1d1f;animation:sa-ap-build 7s ease infinite both;animation-delay:1.8s}
@keyframes sa-ap-build{0%,6%{transform:scaleX(0);opacity:0}16%,90%{transform:none;opacity:1}100%{transform:scaleX(0);opacity:0}}
.sa-sprint{display:grid;gap:2.4cqi}
.sa-sprint div{display:flex;align-items:center;gap:2cqi;font:600 3cqi/1 var(--body);color:#1d1d1f}
.sa-sprint b{width:5cqi;height:5cqi;border-radius:50%;background:#e3e3e8;animation:sa-ap-sprint 7s ease infinite}
.sa-sprint div:nth-child(2) b{animation-delay:1.2s}.sa-sprint div:nth-child(3) b{animation-delay:2.4s;animation-name:sa-ap-sprint-gold}
@keyframes sa-ap-sprint{0%,8%{background:#e3e3e8}16%,90%{background:#1d1d1f}100%{background:#e3e3e8}}
@keyframes sa-ap-sprint-gold{0%,8%{background:#e3e3e8}16%,90%{background:#B49A45}100%{background:#e3e3e8}}

/* test: iOS and Android, checks pass on each */
.sa-aptest{width:84%;display:flex;justify-content:center;gap:4cqi}
.sa-aptest__ph{flex:none;width:30cqi;aspect-ratio:9/16;border-radius:4.4cqi;border:1.1cqi solid #0b0b0c;background:#fff;padding:4cqi 2.4cqi;display:flex;flex-direction:column;gap:2.4cqi;box-shadow:0 6cqi 12cqi -6cqi rgba(0,0,0,.45)}
.sa-aptest__ph.and{border-radius:2.6cqi}
.sa-aptest__ph small{font:700 2.4cqi/1 var(--body);color:#7a6519;letter-spacing:.06em}
.sa-aptest .sa-rv{font-size:2.6cqi;gap:1.6cqi}
.sa-aptest .sa-rv i{width:4cqi;height:4cqi}
.sa-aptest__ph.and .sa-rv i,.sa-aptest__ph.and .sa-rv i::after{animation-delay:.4s}

/* store: review status flips to published */
.sa-apstore{gap:3cqi}
.sa-store{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2.6cqi;padding:2.6cqi 3cqi;border-radius:2.6cqi;background:#f5f5f7;font:600 3.2cqi/1.2 var(--body);color:#1d1d1f}
.sa-store i{width:7cqi;height:7cqi;border-radius:1.8cqi;background:#1d1d1f}
.sa-store i.gp{background:conic-gradient(#3E9150 0 25%,#B49A45 0 50%,#d23c3c 0 75%,#3b6fd6 0)}
.sa-store em{position:relative;font-style:normal;min-width:20cqi;height:5cqi}
.sa-store em b{position:absolute;inset:0;display:grid;place-items:center;border-radius:9cqi;font:600 2.4cqi/1 var(--body)}
.sa-store em .a{background:#f5f0e1;color:#7a6519;animation:sa-st-a 7s ease infinite}
.sa-store em .p{background:#e3f0e5;color:#2F6B3A;animation:sa-st-p 7s ease infinite}
.sa-store:nth-of-type(3) em b{animation-delay:.6s}
@keyframes sa-st-a{0%,40%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes sa-st-p{0%,40%{opacity:0;transform:scale(.8)}50%,92%{opacity:1;transform:none}100%{opacity:0}}

/* metrics: active users rising + new version */
.sa-apmet{gap:3cqi}
.sa-apmet .sa-chart path{stroke:#B49A45}
.sa-apmet__v{display:flex;justify-content:space-between;align-items:center;padding:2.4cqi 3cqi;border-radius:2.4cqi;background:#f5f5f7;font:500 3cqi/1 var(--body);color:#6e6e73;animation:mk-in 7s ease infinite both;animation-delay:1.4s}
.sa-apmet__v em{font:700 3.2cqi/1 var(--body);font-style:normal;color:#1d1d1f}

@media (prefers-reduced-motion:reduce){.sa-apbuild__scr i,.sa-apbuild__scr span{transform:none;opacity:1}.sa-sprint b{background:#1d1d1f}.sa-store em .a{opacity:0}.sa-store em .p{opacity:1;transform:none}}

/* ───────── step illustrations for Visualização arquitetônica ───────── */
.sa-arup,.sa-arplan{gap:2.6cqi;width:78%}

/* project files arrive in a folder */
.sa-arup__folder{display:flex;align-items:center;gap:2.4cqi}
.sa-arup__folder i{width:8cqi;height:6cqi;border-radius:1cqi;background:linear-gradient(135deg,#EFE2B4,#A08B34);position:relative}
.sa-arup__folder i::before{content:"";position:absolute;left:0;top:-1.4cqi;width:45%;height:1.8cqi;border-radius:1cqi 1cqi 0 0;background:#C2AE66}
.sa-arup .sa-file{animation:sa-ar-in 7s ease infinite both}
.sa-arup .sa-file:nth-of-type(2){animation-delay:.4s}.sa-arup .sa-file:nth-of-type(3){animation-delay:.8s}
@keyframes sa-ar-in{0%{opacity:0;transform:translateY(-4cqi)}12%,88%{opacity:1;transform:none}100%{opacity:0}}

/* plan gains floors, furniture and plants */
.sa-arplan svg{width:100%}
.sa-arplan .w{fill:none;stroke:#1d1d1f;stroke-width:1.2}
.sa-arplan .fl{stroke:none;animation:sa-ar-fill 7s ease infinite}
.sa-arplan .fl.a{fill:#e7d6b4}.sa-arplan .fl.b{fill:#d9c49a;animation-delay:.3s}.sa-arplan .fl.c{fill:#cfd8d2;animation-delay:.6s}
.sa-arplan .fu{fill:#fff;stroke:#86868b;stroke-width:.5;animation:sa-ar-fill 7s ease infinite;animation-delay:1s}
.sa-arplan .pl{fill:#5f8f4f;animation:sa-ar-fill 7s ease infinite;animation-delay:1.4s}
@keyframes sa-ar-fill{0%,12%{opacity:0}26%,90%{opacity:1}100%{opacity:0}}

/* walls rise from the plan */
.sa-armodel{width:78%;animation:mk-float 6s ease-in-out infinite}
.sa-armodel svg{width:100%;overflow:visible}
.sa-armodel path{fill:none;stroke:#1d1d1f;stroke-width:1;stroke-linejoin:round}
.sa-armodel .base{fill:#f2f2f5;stroke:#86868b}
.sa-armodel .roof{stroke:#A08B34;stroke-width:1.4}
.sa-armodel .up{transform-origin:60px 70px;animation:sa-ar-rise 7s ease infinite}
@keyframes sa-ar-rise{0%,10%{transform:scaleY(0);opacity:0}35%,90%{transform:none;opacity:1}100%{transform:scaleY(0);opacity:0}}

/* light through the window, material swatches */
.sa-arroom{width:80%;display:grid;gap:3cqi}
.sa-arroom .room{position:relative;aspect-ratio:16/10;border-radius:3cqi;overflow:hidden;background:linear-gradient(180deg,#f3ece0,#e6dac4);box-shadow:0 8cqi 16cqi -8cqi rgba(0,0,0,.45)}
.sa-arroom .win{position:absolute;right:10%;top:12%;width:26%;height:42%;border:1cqi solid #fff;background:linear-gradient(180deg,#bcd7e6,#e9f2f6)}
.sa-arroom .beam{position:absolute;right:6%;top:50%;width:56%;height:46%;background:linear-gradient(200deg,rgba(255,232,180,.8),rgba(255,232,180,0) 70%);clip-path:polygon(70% 0,100% 0,60% 100%,0 100%);transform-origin:100% 0;animation:sa-ar-beam 7s ease-in-out infinite}
.sa-arroom .floor{position:absolute;left:0;right:0;bottom:0;height:32%;background:repeating-linear-gradient(90deg,#b58a5a 0 8cqi,#a77d50 8cqi 16cqi)}
.sa-arroom .sofa{position:absolute;left:10%;bottom:20%;width:38%;height:16%;border-radius:2cqi 2cqi 1cqi 1cqi;background:linear-gradient(180deg,#55705f,#3f5648)}
@keyframes sa-ar-beam{0%,100%{transform:skewX(0);opacity:.7}50%{transform:skewX(-14deg);opacity:1}}
.sa-arroom .mats{display:flex;gap:2cqi}
.sa-arroom .mats span{flex:1;padding:5cqi 0 1.6cqi;border-radius:2cqi;text-align:center;font:600 2.6cqi/1 var(--body);color:#fff;text-shadow:0 .3cqi .8cqi rgba(0,0,0,.4);animation:mk-in 7s ease infinite both}
.sa-arroom .mats .wood{background:repeating-linear-gradient(100deg,#a7774a 0 2cqi,#8f6339 2cqi 3cqi)}
.sa-arroom .mats .stone{background:radial-gradient(circle at 30% 30%,#c9c5bd,#9a958c);animation-delay:.3s}
.sa-arroom .mats .fabric{background:repeating-linear-gradient(45deg,#6f8f80 0 1cqi,#5d7b6d 1cqi 2cqi);animation-delay:.6s}

@media (prefers-reduced-motion:reduce){.sa-arplan .fl,.sa-arplan .fu,.sa-arplan .pl{opacity:1}.sa-armodel .up{transform:none;opacity:1}}

/* ───────── step illustrations for Design editorial, Embalagens e rótulos and Registro de marcas ───────── */
.sa-isbn,.sa-die,.sa-rmsearch,.sa-rmclass,.sa-rmprot,.sa-rmcert{gap:2.8cqi;width:78%}

/* book cover */
.sa-cover{width:46%;aspect-ratio:2/3;display:flex;border-radius:.8cqi 2.4cqi 2.4cqi .8cqi;overflow:hidden;box-shadow:0 8cqi 16cqi -8cqi rgba(0,0,0,.5);animation:mk-float 6s ease-in-out infinite}
.sa-cover__spine{width:10%;background:linear-gradient(90deg,#6f5f22,#A08B34)}
.sa-cover__front{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:1.8cqi;padding:5cqi;background:linear-gradient(170deg,#1f3b4d,#0f1d27 70%);color:#fff}
.sa-cover__front small{font:600 2.4cqi/1 var(--body);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.flow__art .sa-cover__front .mk-t{font-size:5.6cqi;line-height:1.05;color:#fff}
.sa-cover__front i{position:absolute;left:18%;right:18%;top:14%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#EFE2B4,#A08B34 70%);animation:sa-sun 7s ease-in-out infinite}
@keyframes sa-sun{0%,100%{transform:translateY(8%)}50%{transform:none}}

/* open spread */
.sa-spread{width:84%;display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:2.4cqi;box-shadow:0 8cqi 16cqi -8cqi rgba(0,0,0,.45);overflow:hidden;animation:mk-float 6s ease-in-out infinite}
.sa-spread>div{position:relative;display:grid;gap:1.6cqi;align-content:start;padding:5cqi 4cqi;min-height:56cqi}
.sa-spread>div:first-child{border-right:1px solid #ececf0;background:linear-gradient(90deg,#fff 85%,#f4f4f7)}
.sa-spread small{font:700 2.2cqi/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#7a6519}
.flow__art .sa-spread .mk-t{font-size:4.2cqi;margin-bottom:1cqi}
.sa-spread .mk-l{height:1.4cqi;background:#e3e3e8;transform-origin:0 50%;animation:sa-type 6s ease infinite both}
.sa-spread .mk-ph{height:20cqi;border-radius:1.6cqi}
.sa-spread em{position:absolute;right:4cqi;bottom:3cqi;font:600 2.2cqi/1 var(--body);font-style:normal;color:#86868b}

/* barcode */
.sa-barcode{display:flex;gap:.7cqi;height:14cqi;align-items:stretch}
.sa-barcode i{background:#1d1d1f;flex:none;transform-origin:50% 100%;animation:sa-bar-in 7s ease infinite both}
@keyframes sa-bar-in{0%{transform:scaleY(0)}15%,92%{transform:none}100%{transform:scaleY(0)}}
.sa-isbn small{font:600 2.8cqi/1 var(--body);letter-spacing:.06em;color:#1d1d1f}

/* 3D box */
.sa-box3d{position:relative;width:40%;aspect-ratio:3/4;transform-style:preserve-3d;animation:sa-spin3d 8s ease-in-out infinite}
.sa-box3d .f{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:1cqi;padding:4cqi;background:linear-gradient(160deg,#f6efe4,#e8d9bf);border-radius:1.4cqi;box-shadow:0 8cqi 16cqi -8cqi rgba(0,0,0,.4)}
.sa-box3d .f small{font:700 2.2cqi/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#7a6519}
.flow__art .sa-box3d .f .mk-t{font-size:4.6cqi}
.sa-box3d .f i{position:absolute;left:22%;top:14%;width:56%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#EFE2B4,#A08B34 70%)}
.sa-box3d .s{position:absolute;top:0;bottom:0;left:100%;width:26%;background:#dcc8a4;transform-origin:0 50%;transform:rotateY(80deg)}
.sa-box3d .t{position:absolute;left:0;right:0;bottom:100%;height:26%;background:#efe3cc;transform-origin:50% 100%;transform:rotateX(80deg)}
@keyframes sa-spin3d{0%,100%{transform:perspective(80cqi) rotateY(-24deg) rotateX(6deg)}50%{transform:perspective(80cqi) rotateY(-8deg) rotateX(2deg)}}

/* dieline */
.sa-die svg{width:100%}
.sa-die .bleed{fill:none;stroke:#d23c3c;stroke-width:.5;stroke-dasharray:1.2 1}
.sa-die .cut{fill:#faf6ee;stroke:#1d1d1f;stroke-width:.8}
.sa-die .fold{fill:none;stroke:#B49A45;stroke-width:.7;stroke-dasharray:2 1.6;animation:sa-flowline 1.6s linear infinite}
.sa-die__legend{display:flex;gap:3cqi;font:600 2.4cqi/1 var(--body);color:#6e6e73}
.sa-die__legend span{display:flex;align-items:center;gap:1.2cqi}
.sa-die__legend i{width:4cqi;height:.6cqi;border-radius:1cqi}
.sa-die__legend i.c{background:#1d1d1f}.sa-die__legend i.d{background:#B49A45}.sa-die__legend i.b{background:#d23c3c}

/* sizes */
.sa-sizes{width:74%;height:56%;display:flex;align-items:flex-end;justify-content:center;gap:5cqi}
.sa-sizes div{display:grid;justify-items:center;gap:2cqi;height:100%;align-content:end}
.sa-sizes i{width:14cqi;height:calc(var(--h) * .44cqi);border-radius:2.6cqi 2.6cqi 2cqi 2cqi;background:linear-gradient(90deg,#efe3cc,#d9c48f);box-shadow:0 5cqi 10cqi -5cqi rgba(0,0,0,.35);transform-origin:50% 100%;animation:sa-size 7s ease infinite both}
.sa-sizes div:nth-child(2) i{animation-delay:.3s}.sa-sizes div:nth-child(3) i{animation-delay:.6s}
.sa-sizes span{font:600 2.8cqi/1 var(--body);color:#1d1d1f}
@keyframes sa-size{0%{transform:scaleY(.2);opacity:0}16%,90%{transform:none;opacity:1}100%{transform:scaleY(.2);opacity:0}}

/* trademark search */
.sa-searchbar{display:flex;align-items:center;gap:2.4cqi;padding:2.6cqi 3cqi;border-radius:9cqi;background:#f2f2f5;font:500 3cqi/1 var(--body);color:#6e6e73}
.sa-searchbar svg{width:4cqi;height:4cqi;flex:none;color:#1d1d1f}
.sa-searchbar span{overflow:hidden;white-space:nowrap;border-right:.4cqi solid #1d1d1f;animation:sa-typing 7s steps(18) infinite}
@keyframes sa-typing{0%{max-width:0}30%,90%{max-width:100%}100%{max-width:0}}

/* classes */
.sa-classes{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqi}
.sa-classes span{display:grid;place-items:center;height:9cqi;border-radius:2.4cqi;background:#f2f2f5;font:700 3.4cqi/1 var(--body);color:#6e6e73}
.sa-classes span.on{animation:sa-class-on 7s ease infinite}
.sa-classes span.on:nth-child(5){animation-delay:.5s}
@keyframes sa-class-on{0%,18%{background:#f2f2f5;color:#6e6e73}28%,90%{background:#1d1d1f;color:#fff}100%{background:#f2f2f5;color:#6e6e73}}
.sa-rmclass .sa-guard{background:#f5f5f7}

/* certificate */
.sa-rmcert{position:relative;background:linear-gradient(180deg,#fff,#faf7ef)}
.sa-rmcert small{font:700 2.4cqi/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#7a6519}
.sa-rmcert__seal{position:absolute;right:5cqi;top:5cqi;width:12cqi;height:12cqi;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#EFE2B4,#A08B34);font:700 6cqi/1 var(--head);color:#1d1d1f;animation:sa-seal 7s ease infinite}
@keyframes sa-seal{0%,30%{transform:scale(0) rotate(-40deg)}42%,90%{transform:none}100%{transform:scale(0) rotate(-40deg)}}

@media (prefers-reduced-motion:reduce){.sa-barcode i,.sa-sizes i{transform:none;opacity:1}.sa-searchbar span{max-width:100%}.sa-classes span.on{background:#1d1d1f;color:#fff}.sa-rmcert__seal{transform:none}}

/* Fotografia de produtos: artes da seção "Como funciona" (SVG, build/mocks/steps-fp.mjs) */
.flow__art[class*="sa-fp-"]{padding:0;display:block}
.flow__art .fp-art{display:block;width:100%;height:100%}
.fp-art text{font-family:var(--body,system-ui,sans-serif)}
@keyframes fp-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media (prefers-reduced-motion:no-preference){.sa-fp-edit .fp-art circle[r="12"]{animation:fp-pop 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}}

/* ───────── step illustrations, group 1: e-mail/CRM, social media, consultoria, copywriting, manutenção ───────── */
.sa-g1{width:80%;gap:2.6cqi}
.sa-g1 .sa-file2,.sa-g1 .sa-kv{animation:mk-in 7s ease infinite both}
.sa-g1 .sa-file2:nth-of-type(3),.sa-g1 .sa-kv:nth-of-type(3){animation-delay:.3s}
.sa-g1 .sa-file2:nth-of-type(4),.sa-g1 .sa-kv:nth-of-type(4){animation-delay:.6s}
.sa-g1 .sa-file2:nth-of-type(5){animation-delay:.9s}

/* tool choice */
.sa-g1-opt{display:flex;align-items:center;gap:2.6cqi;padding:2.4cqi 2.8cqi;border-radius:2.4cqi;background:#f5f5f7;transition:none}
.sa-g1-opt i{flex:none;width:4.4cqi;height:4.4cqi;border-radius:50%;border:.5cqi solid #d2d2d7}
.sa-g1-opt span{display:grid;gap:.8cqi;min-width:0}
.sa-g1-opt b{font:600 3.1cqi/1.1 var(--body);color:#1d1d1f}
.sa-g1-opt small{font:500 2.5cqi/1.1 var(--body);color:#86868b}
.sa-g1-opt.on{animation:sa-g1-pick 7s ease infinite}
.sa-g1-opt.on i{animation:sa-g1-dot 7s ease infinite}
@keyframes sa-g1-pick{0%,25%{box-shadow:none;background:#f5f5f7}35%,90%{box-shadow:0 0 0 .6cqi #B49A45;background:#fff}100%{box-shadow:none;background:#f5f5f7}}
@keyframes sa-g1-dot{0%,25%{background:transparent;border-color:#d2d2d7}35%,90%{background:#B49A45;border-color:#B49A45}100%{background:transparent;border-color:#d2d2d7}}

/* CRM board */
.sa-g1-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqi}
.sa-g1-cols div{display:flex;flex-direction:column;gap:1.4cqi;padding:1.6cqi;border-radius:2cqi;background:#f5f5f7;min-height:26cqi}
.sa-g1-cols small{font:700 2.2cqi/1 var(--body);color:#6e6e73;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-g1-cols i{height:5cqi;border-radius:1.2cqi;background:#fff;box-shadow:0 .5cqi 1.2cqi -.5cqi rgba(0,0,0,.25)}
.sa-g1-cols i.mv{background:linear-gradient(135deg,#EFE2B4,#C2AE66);animation:sa-g1-move 7s ease-in-out infinite}
@keyframes sa-g1-move{0%,20%{transform:none}45%,75%{transform:translateX(calc(100% + 4.8cqi))}100%{transform:none}}
.sa-g1-auto{display:flex;justify-content:space-between;align-items:center;gap:2cqi;padding:2.2cqi 2.6cqi;border-radius:2.4cqi;background:#f5f5f7;font:500 2.9cqi/1.2 var(--body);color:#1d1d1f}
.sa-g1-auto i{position:relative;flex:none;width:9cqi;height:5cqi;border-radius:9cqi;background:#d2d2d7;animation:sa-sw-bg 7s ease infinite}
.sa-g1-auto i::after{content:"";position:absolute;left:.6cqi;top:.6cqi;width:3.8cqi;height:3.8cqi;border-radius:50%;background:#fff;box-shadow:0 .4cqi 1cqi rgba(0,0,0,.25);animation:sa-sw-knob 7s ease infinite}

/* tests / fixes */
.sa-g1-test .sa-rv{font-size:3.2cqi}

/* instagram profile */
.sa-g1-ig{display:flex;align-items:center;gap:2.6cqi;padding-bottom:2cqi;border-bottom:1px solid #ececf0}
.sa-g1-ig i{flex:none;width:10cqi;height:10cqi;border-radius:50%;background:linear-gradient(135deg,#EFE2B4,#A08B34);box-shadow:0 0 0 .6cqi #fff,0 0 0 1.1cqi #d2d2d7}
.sa-g1-ig b{display:block;font:600 3.3cqi/1.1 var(--body);color:#1d1d1f}
.sa-g1-ig small{font:500 2.4cqi/1.2 var(--body);color:#86868b}

/* feed grid */
.sa-g1-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqi}
.sa-g1-feed div{aspect-ratio:1;border-radius:1.2cqi;background:#ececf0}
.sa-g1-feed div:nth-child(2){background:#1d1d1f}.sa-g1-feed div:nth-child(6){background:#d9c78e}
.sa-g1-feed div.new{background:linear-gradient(135deg,#EFE2B4,#A08B34);animation:sa-g1-new 7s ease infinite}
@keyframes sa-g1-new{0%,20%{transform:scale(.3);opacity:0}32%,90%{transform:none;opacity:1}100%{transform:scale(.3);opacity:0}}
.sa-g1 .mk-l{height:1.6cqi;background:#e3e3e8}
.sa-g1 .mk-l.d{background:#1d1d1f}

/* publish: comment and reply */
.sa-g1 .sa-b{font-size:3cqi;max-width:90%}
.sa-g1 .sa-b.in{background:#f2f2f5}
.sa-g1 .sa-b.out{animation-delay:1s}

/* SWOT */
.sa-g1-swot{display:grid;grid-template-columns:1fr 1fr;gap:1.8cqi}
.sa-g1-swot div{display:grid;gap:1.2cqi;padding:2.2cqi;border-radius:2.2cqi;background:#f5f5f7;animation:mk-in 7s ease infinite both}
.sa-g1-swot div:nth-child(2){animation-delay:.3s}.sa-g1-swot div:nth-child(3){animation-delay:.6s}.sa-g1-swot div:nth-child(4){animation-delay:.9s}
.sa-g1-swot small{font:700 2.5cqi/1 var(--body);color:#7a6519}

/* 90-day plan */
.sa-g1-phase{display:flex;align-items:center;gap:2.6cqi;padding:2.2cqi 2.6cqi;border-radius:2.4cqi;background:#f5f5f7;font:500 3cqi/1.2 var(--body);color:#1d1d1f;animation:mk-in 7s ease infinite both}
.sa-g1-phase:nth-of-type(3){animation-delay:.35s}.sa-g1-phase:nth-of-type(4){animation-delay:.7s}
.sa-g1-phase em{flex:none;font:700 2.5cqi/1 var(--body);font-style:normal;padding:1.2cqi 1.8cqi;border-radius:9cqi;background:#1d1d1f;color:#fff}
.sa-g1-phase:last-of-type em{background:#B49A45;color:#1d1d1f}

/* monthly KPIs */
.sa-g1-kpi{display:flex;justify-content:space-between;align-items:center;gap:2cqi;padding:2.2cqi 2.6cqi;border-radius:2.4cqi;background:#f5f5f7;animation:mk-in 7s ease infinite both}
.sa-g1-kpi:nth-of-type(3){animation-delay:.3s}.sa-g1-kpi:nth-of-type(4){animation-delay:.6s}
.sa-g1-kpi span{display:grid;gap:.6cqi}
.sa-g1-kpi b{font:600 3cqi/1.1 var(--body);color:#1d1d1f}
.sa-g1-kpi small{font:500 2.3cqi/1 var(--body);color:#86868b}
.sa-g1-kpi em{font:700 3.2cqi/1 var(--body);font-style:normal}
.sa-g1-kpi.up em{color:#2F6B3A}.sa-g1-kpi.down em{color:#b3261e}

/* research quotes */
.sa-g1-tag{font:700 2.4cqi/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#7a6519}
.sa-g1-quote{padding:2.2cqi 2.6cqi;border-radius:2.4cqi;background:#f5f0e1;font:500 2.8cqi/1.35 var(--body);color:#1d1d1f;animation:mk-in 7s ease infinite both}
.sa-g1-quote:nth-of-type(2){animation-delay:.5s}

/* copy document */
.sa-g1-sec{display:grid;gap:1.2cqi;padding-bottom:1.8cqi;border-bottom:1px solid #f0f0f2}
.sa-g1-sec small{font:700 2.3cqi/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#86868b}
.sa-g1-sec .mk-l{transform-origin:0 50%;animation:sa-type 6s ease infinite both}

@media (prefers-reduced-motion:reduce){.sa-g1-opt.on{box-shadow:0 0 0 .6cqi #B49A45;background:#fff}.sa-g1-opt.on i{background:#B49A45;border-color:#B49A45}.sa-g1-feed div.new{transform:none;opacity:1}.sa-g1-auto i{background:#1d1d1f}.sa-g1-auto i::after{transform:translateX(4cqi)}}

/* ───────── step illustrations, group 2: identidade visual, naming, branding, papelaria, design de posts ───────── */
.sa-g2-refine,.sa-g2-names,.sa-g2-chosen,.sa-g2-map,.sa-g2-voice,.sa-g2-platform,.sa-g2-print,.sa-g2-feed{width:78%;gap:2.8cqi}

/* identidade: logo applied in real situations */
.sa-g2-concept{width:84%;display:grid;gap:4cqi;justify-items:center}
.sa-g2-logo{display:flex;align-items:center;gap:2.4cqi;padding:4cqi 6cqi;border-radius:4cqi;background:#fff;box-shadow:0 6cqi 12cqi -6cqi rgba(0,0,0,.35);animation:mk-float 6s ease-in-out infinite}
.sa-g2-logo i,.sa-g2-apps i{flex:none;width:7cqi;height:7cqi;border-radius:50% 50% 50% 12%;background:linear-gradient(135deg,#EFE2B4,#A08B34)}
.flow__art .sa-g2-logo .mk-t{font-size:6cqi}
.sa-g2-apps{width:100%;display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:3cqi;align-items:end}
.sa-g2-apps>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqi;border-radius:2.4cqi;box-shadow:0 4cqi 8cqi -4cqi rgba(0,0,0,.35);animation:mk-in 7s ease infinite both}
.sa-g2-apps span{font:600 2.6cqi/1 var(--head);letter-spacing:-.02em}
.sa-g2-apps .card{aspect-ratio:1.6;background:#1d1d1f;color:#fff}
.sa-g2-apps .card i{width:4.6cqi;height:4.6cqi}
.sa-g2-apps .feed{aspect-ratio:1;background:linear-gradient(160deg,#f6efe4,#e8d9bf);animation-delay:.4s}
.sa-g2-apps .sign{aspect-ratio:1.6;background:#fff;color:#1d1d1f;animation-delay:.8s}
.sa-g2-apps .sign i{width:4.6cqi;height:4.6cqi}

/* identidade: refinement — construction grid, palette and fonts */
.sa-g2-grid{position:relative;height:20cqi;border-radius:2.4cqi;background:linear-gradient(#e8e8ed 1px,transparent 1px) 0 0/4cqi 4cqi,linear-gradient(90deg,#e8e8ed 1px,transparent 1px) 0 0/4cqi 4cqi,#fbfbfd;display:grid;place-items:center}
.sa-g2-grid i{width:12cqi;height:12cqi;border-radius:50% 50% 50% 12%;background:linear-gradient(135deg,#EFE2B4,#A08B34);outline:.3cqi dashed #A08B34;outline-offset:1.6cqi;animation:sa-g2-snap 7s ease infinite}
@keyframes sa-g2-snap{0%,14%{transform:rotate(-12deg) scale(.86)}30%,90%{transform:none}100%{transform:rotate(-12deg) scale(.86)}}
.sa-g2-sw{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqi}
.sa-g2-sw i{height:7cqi;border-radius:1.6cqi;transform-origin:50% 100%;animation:sa-g2-pop 7s ease infinite both}
.sa-g2-sw i:nth-child(1){background:#1d1d1f}.sa-g2-sw i:nth-child(2){background:#A08B34;animation-delay:.25s}.sa-g2-sw i:nth-child(3){background:#D9C78E;animation-delay:.5s}.sa-g2-sw i:nth-child(4){background:#f2f2f5;animation-delay:.75s}
@keyframes sa-g2-pop{0%,10%{transform:scaleY(.2);opacity:0}22%,92%{transform:none;opacity:1}100%{transform:scaleY(.2);opacity:0}}
.sa-g2-fonts{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:1.6cqi 2.4cqi;font:500 2.8cqi/1 var(--body);color:#6e6e73}
.flow__art .sa-g2-fonts .mk-t{font-size:7cqi;color:#1d1d1f}
.sa-g2-body{font:500 6cqi/1 var(--body);color:#1d1d1f}

/* naming: options generated and filtered */
.sa-g2-name{display:flex;justify-content:space-between;align-items:center;padding:1.8cqi 2.6cqi;border-radius:2.2cqi;background:#f5f5f7;font:600 3.2cqi/1 var(--head);color:#1d1d1f;animation:mk-in 7s ease infinite both}
.sa-g2-name:nth-of-type(3){animation-delay:.2s}.sa-g2-name:nth-of-type(4){animation-delay:.4s}.sa-g2-name:nth-of-type(5){animation-delay:.6s}.sa-g2-name:nth-of-type(6){animation-delay:.8s}.sa-g2-name:nth-of-type(7){animation-delay:1s}
.sa-g2-name em{font:600 2.3cqi/1 var(--body);font-style:normal;padding:1cqi 1.6cqi;border-radius:9cqi}
.sa-g2-name.keep em{background:#e3f0e5;color:#2F6B3A}
.sa-g2-name.out em{background:#fbe4e2;color:#b3261e}
.sa-g2-name.out span{position:relative}
.sa-g2-name.out span::after{content:"";position:absolute;left:0;top:55%;height:.4cqi;width:100%;background:#86868b;transform-origin:0 50%;animation:sa-strike 7s ease infinite}
.sa-g2-name.out{animation-name:mk-in,sa-g2-fade}
@keyframes sa-g2-fade{0%,30%{background:#f5f5f7}40%,90%{background:#fafafa;color:#86868b}100%{background:#f5f5f7}}

/* naming: finalists presented with meaning and checks */
.sa-g2-final{width:86%;display:grid;gap:2.6cqi}
.sa-g2-final>div{display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto auto;column-gap:2cqi;row-gap:.8cqi;align-items:center;padding:3cqi 3.4cqi;border-radius:3cqi;background:#fff;box-shadow:0 5cqi 10cqi -6cqi rgba(0,0,0,.35);animation:mk-in 7s ease infinite both}
.sa-g2-final>div:nth-child(2){animation-delay:.4s}.sa-g2-final>div:nth-child(3){animation-delay:.8s}
.flow__art .sa-g2-final .mk-t{font-size:4.4cqi;grid-column:1}
.sa-g2-final small{grid-column:1;grid-row:2;font:500 2.5cqi/1.2 var(--body);color:#6e6e73}
.sa-g2-final span{grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:.8cqi;font:600 2cqi/1 var(--body);color:#6e6e73}
.sa-g2-final span i{width:3.6cqi;height:3.6cqi;border-radius:50%;background:#3E9150}
.sa-g2-final>div.on{box-shadow:0 0 0 .6cqi #B49A45,0 5cqi 10cqi -6cqi rgba(0,0,0,.35)}

/* naming: chosen name and next steps */
.sa-g2-chosen small,.sa-g2-voice small{font:700 2.4cqi/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#7a6519}
.flow__art .sa-g2-chosen>.mk-t{font-size:8cqi;margin-bottom:1cqi}
.sa-g2-chosen .sa-rv{font-size:3.2cqi}
.sa-g2-chosen .sa-rv:nth-of-type(1) i,.sa-g2-chosen .sa-rv:nth-of-type(1) i::after{animation-delay:.4s}
.sa-g2-chosen .sa-rv:nth-of-type(2) i,.sa-g2-chosen .sa-rv:nth-of-type(2) i::after{animation-delay:.9s}
.sa-g2-chosen .sa-rv:nth-of-type(3) i,.sa-g2-chosen .sa-rv:nth-of-type(3) i::after{animation-delay:1.4s}
.sa-g2-chosen .sa-rv:nth-of-type(3){color:#7a6519;font-weight:600}

/* branding: positioning map, your brand finds the empty space */
.sa-g2-axes{position:relative;height:40cqi;border-radius:2.4cqi;background:#fbfbfd}
.sa-g2-axes::before,.sa-g2-axes::after{content:"";position:absolute;background:#d2d2d7}
.sa-g2-axes::before{left:50%;top:9%;bottom:9%;width:.3cqi}
.sa-g2-axes::after{top:50%;left:6%;right:6%;height:.3cqi}
.sa-g2-axes span{position:absolute;font:600 2.2cqi/1 var(--body);color:#86868b}
.sa-g2-axes .t{top:1.6cqi;left:50%;transform:translateX(-50%)}.sa-g2-axes .b{bottom:1.6cqi;left:50%;transform:translateX(-50%)}
.sa-g2-axes .l{left:1.6cqi;top:53%}.sa-g2-axes .r{right:1.6cqi;top:53%}
.sa-g2-axes i{position:absolute;width:4cqi;height:4cqi;margin:-2cqi 0 0 -2cqi;border-radius:50%;background:#c7c7cc}
.sa-g2-you{position:absolute;width:6cqi;height:6cqi;margin:-3cqi 0 0 -3cqi;border-radius:50%;background:linear-gradient(135deg,#EFE2B4,#A08B34);box-shadow:0 0 0 1.4cqi rgba(180,154,69,.22);animation:sa-g2-seek 7s ease-in-out infinite}
@keyframes sa-g2-seek{0%,10%{left:30%;top:66%}35%{left:46%;top:44%}55%,92%{left:76%;top:24%}100%{left:30%;top:66%}}

/* branding: positioning, tone of voice sliders */
.sa-g2-slider{display:grid;grid-template-columns:13cqi 1fr 13cqi;align-items:center;gap:2cqi;font:500 2.5cqi/1 var(--body);color:#6e6e73}
.sa-g2-slider span:last-child{text-align:right}
.sa-g2-slider i{position:relative;height:1.2cqi;border-radius:2cqi;background:#e8e8ed}
.sa-g2-slider b{position:absolute;top:50%;width:4.4cqi;height:4.4cqi;margin:-2.2cqi 0 0 -2.2cqi;border-radius:50%;background:#1d1d1f;animation:sa-g2-slide 7s ease infinite}
.sa-g2-slider:nth-of-type(2) b{animation-delay:.3s}.sa-g2-slider:nth-of-type(3) b{animation-delay:.6s}
@keyframes sa-g2-slide{0%,12%{left:50%}35%,90%{left:var(--v)}100%{left:50%}}

/* branding: final platform document */
.sa-g2-platform .sa-rv{font-size:3.3cqi}

/* papelaria: realistic stationery simulation */
.sa-g2-stationery{position:relative;width:82%;aspect-ratio:1/1.05}
.sa-g2-stationery>div{position:absolute;background:#fff;box-shadow:0 6cqi 12cqi -6cqi rgba(0,0,0,.4);border-radius:1.4cqi}
.sa-g2-stationery .sheet{left:4%;top:2%;width:56%;aspect-ratio:1/1.41;padding:5cqi 4cqi;display:grid;align-content:start;gap:2cqi;transform:rotate(-5deg);animation:mk-float 6s ease-in-out infinite}
.sa-g2-stationery .sheet i{width:6cqi;height:6cqi;border-radius:50% 50% 50% 12%;background:linear-gradient(135deg,#EFE2B4,#A08B34);margin-bottom:2cqi}
.sa-g2-stationery .sheet .mk-l{height:1.2cqi}
.sa-g2-stationery .cardf{right:2%;top:16%;width:46%;aspect-ratio:1.7;background:#1d1d1f;display:flex;align-items:center;justify-content:center;gap:2cqi;color:#fff;font:600 3.6cqi/1 var(--head);transform:rotate(6deg);animation:mk-float 6s ease-in-out infinite -2s}
.sa-g2-stationery .cardf i{width:5cqi;height:5cqi;border-radius:50% 50% 50% 12%;background:linear-gradient(135deg,#EFE2B4,#A08B34)}
.sa-g2-stationery .cardb{right:8%;top:52%;width:46%;aspect-ratio:1.7;padding:3cqi;display:grid;align-content:center;gap:1.6cqi;transform:rotate(-3deg);animation:mk-float 6s ease-in-out infinite -4s}
.sa-g2-stationery .cardb b{width:12cqi;height:1.6cqi;border-radius:2cqi;background:#A08B34}
.sa-g2-stationery .cardb .mk-l{height:1cqi}

/* papelaria: print-ready file — bleed, trim, safe area, CMYK */
.sa-g2-art{position:relative;height:30cqi}
.sa-g2-art .bleed{position:absolute;inset:0;border:.4cqi dashed #d23c3c;border-radius:1cqi}
.sa-g2-art .trim{position:absolute;inset:2.6cqi;border-radius:.6cqi;background:#1d1d1f;display:flex;align-items:center;justify-content:center;gap:2cqi;color:#fff;font:600 4cqi/1 var(--head);outline:.3cqi solid #1d1d1f}
.sa-g2-art .trim i{width:6cqi;height:6cqi;border-radius:50% 50% 50% 12%;background:linear-gradient(135deg,#EFE2B4,#A08B34)}
.sa-g2-art .safe{position:absolute;inset:5.6cqi;border:.3cqi dashed #B49A45;border-radius:.4cqi;animation:sa-g2-blink 2.4s ease-in-out infinite}
@keyframes sa-g2-blink{50%{opacity:.3}}
.sa-g2-cmyk{display:flex;align-items:center;gap:1.4cqi;font:600 2.4cqi/1.2 var(--body);color:#6e6e73}
.sa-g2-cmyk i{flex:none;width:3.6cqi;height:3.6cqi;border-radius:50%;animation:sa-g2-pop 7s ease infinite both}
.sa-g2-cmyk i.c{background:#00a3e0}.sa-g2-cmyk i.m{background:#e6007e;animation-delay:.2s}.sa-g2-cmyk i.y{background:#ffd400;animation-delay:.4s}.sa-g2-cmyk i.k{background:#1d1d1f;animation-delay:.6s}
.sa-g2-cmyk span{margin-left:1cqi}

/* papelaria: the finished pieces */
.sa-g2-pieces{position:relative;width:82%;aspect-ratio:1/1.05}
.sa-g2-pieces>div{position:absolute;background:#fff;border-radius:1.4cqi;box-shadow:0 6cqi 12cqi -6cqi rgba(0,0,0,.4);display:flex;align-items:flex-end;padding:2.4cqi;animation:mk-in 7s ease infinite both}
.sa-g2-pieces span{font:600 2.4cqi/1 var(--body);color:#6e6e73;background:#f5f5f7;padding:1cqi 1.6cqi;border-radius:9cqi}
.sa-g2-pieces .lh{left:2%;top:0;width:48%;aspect-ratio:1/1.41;background:linear-gradient(180deg,#fff 70%,#faf6ee);border-top:2cqi solid #A08B34}
.sa-g2-pieces .env{right:0;top:6%;width:48%;aspect-ratio:1.9;background:linear-gradient(160deg,#fff,#f2f2f5);animation-delay:.3s}
.sa-g2-pieces .bc{right:6%;top:40%;width:40%;aspect-ratio:1.7;background:#1d1d1f;animation-delay:.6s}
.sa-g2-pieces .bc span{background:rgba(255,255,255,.14);color:#fff}
.sa-g2-pieces .menu{left:12%;bottom:4%;width:40%;aspect-ratio:1/1.3;background:linear-gradient(180deg,#f6efe4,#e8d9bf);animation-delay:.9s}

/* design de posts: art with a comment pin, then approved */
.sa-g2-post{position:relative;width:66%}
.sa-g2-post .art{aspect-ratio:1;border-radius:3cqi;overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2cqi;padding:5cqi;background:#1d1d1f;box-shadow:0 8cqi 16cqi -8cqi rgba(0,0,0,.45);animation:mk-float 6s ease-in-out infinite}
.sa-g2-post .art .mk-ph{position:absolute;inset:0;border-radius:0;opacity:.65;animation:sa-g2-swap 7s ease infinite}
.flow__art .sa-g2-post .mk-t{position:relative;font-size:6cqi;color:#fff}
.sa-g2-post .art .mk-l{position:relative}
@keyframes sa-g2-swap{0%,45%{background:linear-gradient(140deg,#e8e8ed,#8e8e93 55%,#48484a)}55%,92%{background:linear-gradient(140deg,#EFE2B4,#A08B34 60%,#4a3f17)}100%{background:linear-gradient(140deg,#e8e8ed,#8e8e93 55%,#48484a)}}
.sa-g2-post .sa-pin{left:70%;top:18%;animation:sa-g2-pin 7s ease infinite}
@keyframes sa-g2-pin{0%,8%{opacity:0;transform:rotate(-45deg) scale(.4)}16%,42%{opacity:1;transform:rotate(-45deg) scale(1)}50%,100%{opacity:0;transform:rotate(-45deg) scale(.4)}}
.sa-g2-post .note{position:absolute;right:-12%;top:30%;display:grid;gap:1cqi;padding:2.4cqi 3cqi;border-radius:2.4cqi;background:#fff;box-shadow:0 4cqi 8cqi -4cqi rgba(0,0,0,.35);font:500 2.6cqi/1.2 var(--body);color:#1d1d1f;animation:sa-g2-note 7s ease infinite}
.sa-g2-post .note small{font:700 2cqi/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#7a6519}
@keyframes sa-g2-note{0%,12%{opacity:0;transform:translateY(2cqi)}20%,42%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateY(2cqi)}}

/* design de posts: feed grid filling up, ready to post */
.sa-g2-feed__head{display:flex;align-items:center;gap:2cqi;font:600 3cqi/1 var(--body);color:#1d1d1f}
.sa-g2-feed__head i{width:6cqi;height:6cqi;border-radius:50%;background:linear-gradient(135deg,#EFE2B4,#A08B34)}
.sa-g2-feed__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqi}
.sa-g2-feed__grid i{aspect-ratio:1;border-radius:1cqi;animation:sa-g2-tile 7s ease infinite both;animation-delay:var(--d)}
.sa-g2-feed__grid i.t0{background:#1d1d1f}.sa-g2-feed__grid i.t1{background:linear-gradient(140deg,#EFE2B4,#A08B34)}.sa-g2-feed__grid i.t2{background:linear-gradient(140deg,#f5f5f7,#d2d2d7)}
@keyframes sa-g2-tile{0%{opacity:0;transform:scale(.6)}12%,90%{opacity:1;transform:none}100%{opacity:0;transform:scale(.6)}}

@media (prefers-reduced-motion:reduce){
  .sa-g2-apps>div,.sa-g2-name,.sa-g2-final>div,.sa-g2-pieces>div,.sa-g2-sw i,.sa-g2-cmyk i,.sa-g2-feed__grid i{opacity:1;transform:none}
  .sa-g2-name.out span::after{transform:scaleX(1)}
  .sa-g2-you{left:76%;top:24%}
  .sa-g2-slider b{left:var(--v)}
  .sa-g2-post .sa-pin,.sa-g2-post .note{opacity:0}
}

/* ───────── step illustrations, group 3: Sistemas web e SaaS, UI/UX design, Apresentações comerciais ───────── */
.sa-g3-board,.sa-g3-deploy,.sa-g3-road,.sa-g3-persona,.sa-g3-hand{gap:2.8cqi;width:78%}

/* clickable prototype in a browser */
.sa-g3-browser,.sa-g3-ui{position:relative;width:82%}
.sa-g3-app{display:grid;grid-template-columns:9cqi 1fr;min-height:44cqi}
.sa-g3-app aside{display:grid;gap:2cqi;align-content:start;padding:3cqi 2cqi;background:#1d1d1f}
.sa-g3-app aside i{height:3cqi;border-radius:1cqi;background:#48484a}
.sa-g3-app aside i.on{background:#B49A45}
.sa-g3-app>div{display:grid;gap:2.2cqi;align-content:start;padding:4cqi}
.flow__art .sa-g3-app .mk-t{font-size:4cqi}
.sa-g3-row{display:flex;align-items:center;gap:2cqi;padding:2cqi;border-radius:1.6cqi;background:#f5f5f7}
.sa-g3-row em{flex:none;width:9cqi;height:3cqi;border-radius:9cqi;background:#e3f0e5}
.sa-g3-btn{justify-self:start;padding:2cqi 3.4cqi;border-radius:2cqi;background:#1d1d1f;color:#fff;font:600 2.8cqi/1 var(--body);animation:sa-g3-press 7s ease infinite}
.sa-g3-cursor{position:absolute;left:30%;top:70%;width:5cqi;height:5cqi;border-radius:50% 50% 50% 0;background:#1d1d1f;border:.5cqi solid #fff;box-shadow:0 1cqi 2cqi rgba(0,0,0,.3);transform:rotate(-20deg);animation:sa-g3-cur 7s ease-in-out infinite}
@keyframes sa-g3-cur{0%,15%{left:80%;top:30%}40%,60%{left:30%;top:80%}85%,100%{left:80%;top:30%}}
@keyframes sa-g3-press{0%,40%{transform:none;background:#1d1d1f}46%{transform:scale(.92)}52%,85%{transform:none;background:#B49A45;color:#1d1d1f}100%{background:#1d1d1f}}

/* sprint board */
.sa-g3-board__head{display:flex;justify-content:space-between;align-items:baseline;gap:2cqi}
.sa-g3-board__head small{font:600 2.4cqi/1 var(--body);color:#2F6B3A;padding:1.2cqi 2cqi;border-radius:9cqi;background:#e3f0e5}
.sa-g3-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqi}
.sa-g3-cols div{display:flex;flex-direction:column;gap:1.4cqi;padding:1.6cqi;border-radius:2cqi;background:#f5f5f7;min-height:26cqi}
.sa-g3-cols small{font:700 2.2cqi/1.2 var(--body);color:#6e6e73}
.sa-g3-cols i{height:5.4cqi;border-radius:1.2cqi;background:#fff;box-shadow:0 .6cqi 1.4cqi -.6cqi rgba(0,0,0,.25)}
.sa-g3-cols i.sa-g3-move{background:linear-gradient(135deg,#EFE2B4,#C2AE66);animation:sa-g3-move 7s ease-in-out infinite}
@keyframes sa-g3-move{0%,25%{transform:none}50%,80%{transform:translateX(calc(100% + 4.8cqi))}100%{transform:none}}
.sa-g3-cycles{display:flex;gap:1.6cqi}
.sa-g3-cycles span{flex:1;padding:1.4cqi 0;border-radius:9cqi;background:#f2f2f5;text-align:center;font:700 2.4cqi/1 var(--body);color:#86868b}
.sa-g3-cycles span.on{background:#1d1d1f;color:#fff}
.sa-g3-cycles span.now{background:#B49A45;color:#1d1d1f;animation:mk-pulse 2.4s ease-in-out infinite}

/* test → production */
.sa-g3-deploy .sa-rv{font-size:3.2cqi}
.sa-g3-env{display:flex;align-items:center;gap:2cqi;font:600 2.8cqi/1 var(--body);color:#6e6e73}
.sa-g3-env i{flex:1;height:.6cqi;border-radius:1cqi;background:linear-gradient(90deg,#d2d2d7 50%,#B49A45 50%) 100% 0/200% 100%;animation:sa-g3-ship 7s ease infinite}
.sa-g3-env .prod{color:#1d1d1f;padding:1.2cqi 2cqi;border-radius:9cqi;background:#e3f0e5}
@keyframes sa-g3-ship{0%,35%{background-position:100% 0}60%,90%{background-position:0 0}100%{background-position:100% 0}}

/* roadmap */
.sa-g3-item{display:flex;justify-content:space-between;align-items:center;gap:2cqi;padding:2.2cqi 2.6cqi;border-radius:2.4cqi;background:#f5f5f7;font:500 3cqi/1.2 var(--body);color:#1d1d1f;animation:mk-in 7s ease infinite both}
.sa-g3-item:nth-of-type(3){animation-delay:.3s}.sa-g3-item:nth-of-type(4){animation-delay:.6s}
.sa-g3-item em{flex:none;font:600 2.4cqi/1 var(--body);font-style:normal;color:#6e6e73}
.sa-g3-item.top{box-shadow:inset 0 0 0 .5cqi #B49A45}
.sa-g3-item.top em{color:#7a6519}

/* persona */
.sa-g3-who{display:flex;align-items:center;gap:3cqi}
.sa-g3-who>i{flex:none;width:11cqi;height:11cqi;border-radius:50%;background:radial-gradient(circle at 50% 38%,#EFE2B4 0 26%,transparent 27%),radial-gradient(circle at 50% 100%,#C2AE66 0 46%,transparent 47%),#f2f2f5}
.sa-g3-who small{display:block;font:500 2.6cqi/1.2 var(--body);color:#6e6e73;margin-top:.8cqi}
.flow__art .sa-g3-who .mk-t{font-size:4.6cqi}
.sa-g3-notes{display:flex;flex-wrap:wrap;gap:1.6cqi}
.sa-g3-notes span{padding:1.8cqi 2.4cqi;border-radius:1cqi;background:#f6edcf;font:600 2.4cqi/1 var(--body);color:#5e4f14;transform:rotate(-2deg);animation:mk-in 7s ease infinite both}
.sa-g3-notes span:nth-child(2){transform:rotate(2deg);animation-delay:.3s}.sa-g3-notes span:nth-child(3){animation-delay:.6s}

/* wireframes linked */
.sa-g3-wires{display:flex;align-items:center;gap:1.4cqi;width:88%}
.sa-g3-wf{flex:1;display:grid;gap:1.4cqi;align-content:start;padding:2.4cqi;border-radius:2.4cqi;background:#fff;border:.4cqi dashed #c7c7cc;min-height:40cqi;box-shadow:0 6cqi 12cqi -8cqi rgba(0,0,0,.35);animation:mk-in 7s ease infinite both}
.sa-g3-wf:nth-of-type(2){animation-delay:.4s}.sa-g3-wf:nth-of-type(3){animation-delay:.8s}
.sa-g3-wf small{font:700 2.2cqi/1 var(--body);color:#6e6e73}
.sa-g3-wf .mk-l{height:1.4cqi;background:#e3e3e8}
.sa-g3-wf .box{height:12cqi;border-radius:1.4cqi;background:repeating-linear-gradient(45deg,#f2f2f5 0 1.2cqi,#fff 1.2cqi 2.4cqi)}
.sa-g3-wf .btn{height:4cqi;border-radius:1.2cqi;background:#1d1d1f}
.sa-g3-arrow{flex:none;width:3cqi;height:.5cqi;background:#B49A45;position:relative}
.sa-g3-arrow::after{content:"";position:absolute;right:-.4cqi;top:-.8cqi;border:1cqi solid transparent;border-left-color:#B49A45;border-right:0}

/* UI prototype */
.sa-g3-ui__body{display:grid;gap:2.4cqi;padding:4cqi}
.sa-g3-ui__kpis{display:grid;grid-template-columns:1fr 1fr;gap:2cqi}
.sa-g3-ui__kpis div{padding:2.4cqi;border-radius:2cqi;background:#f5f5f7}
.sa-g3-ui__kpis small{display:block;font:600 2.2cqi/1 var(--body);color:#86868b;margin-bottom:1cqi}
.sa-g3-ui__kpis b{font:600 4.4cqi/1 var(--head);color:#1d1d1f}
.sa-g3-ui__chart{display:flex;align-items:flex-end;gap:1.6cqi;height:16cqi}
.sa-g3-ui__chart i{flex:1;border-radius:1cqi 1cqi 0 0;background:#d2d2d7;transform-origin:50% 100%;animation:sa-rise 4s ease-in-out infinite}
.sa-g3-ui__chart i:last-child{background:linear-gradient(180deg,#D9C78E,#A08B34)}

/* handoff */
.sa-g3-spec{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqi;align-items:center}
.sa-g3-spec .frame{position:relative;height:18cqi;border-radius:1.6cqi;border:.4cqi solid #1d1d1f;background:repeating-linear-gradient(0deg,transparent 0 3.6cqi,#f2f2f5 3.6cqi 4cqi)}
.sa-g3-spec .pad{position:absolute;left:0;top:0;padding:.8cqi 1.4cqi;border-radius:0 0 1cqi 0;background:#e0457b;color:#fff;font:700 2.2cqi/1 var(--body);animation:mk-pulse 2.4s ease-in-out infinite}
.sa-g3-spec .tokens{display:grid;gap:1.4cqi}
.sa-g3-spec .tokens span{display:flex;align-items:center;gap:1.4cqi;font:500 2.6cqi/1 var(--body);color:#1d1d1f}
.sa-g3-spec .tokens i{flex:none;width:4cqi;height:4cqi;border-radius:1cqi}

/* slide being designed */
.sa-g3-deck{width:84%;display:grid;gap:2.4cqi;animation:mk-float 6s ease-in-out infinite}
.sa-g3-slide{aspect-ratio:16/9;display:flex;flex-direction:column;gap:1.4cqi;padding:4cqi;border-radius:2.4cqi;background:#1d1d1f;color:#fff;box-shadow:0 8cqi 16cqi -8cqi rgba(0,0,0,.45)}
.sa-g3-slide small{font:700 2.2cqi/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#D9C78E}
.flow__art .sa-g3-slide .mk-t{font-size:4.6cqi;color:#fff}
.sa-g3-sl-body{flex:1;display:grid;grid-template-columns:1.3fr 1fr;gap:2.4cqi;min-height:0}
.sa-g3-sl-bars{display:flex;align-items:flex-end;gap:1.4cqi}
.sa-g3-sl-bars i{flex:1;border-radius:.8cqi .8cqi 0 0;background:#48484a;transform-origin:50% 100%;animation:sa-rise 4s ease-in-out infinite}
.sa-g3-sl-bars i:last-child{background:linear-gradient(180deg,#EFE2B4,#A08B34)}
.sa-g3-sl-body .mk-ph{border-radius:1.4cqi;min-height:0}
.sa-g3-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqi}
.sa-g3-thumbs i{aspect-ratio:16/9;border-radius:1cqi;background:#e3e3e8}
.sa-g3-thumbs i.on{background:#1d1d1f;box-shadow:0 0 0 .5cqi #B49A45}

@media (prefers-reduced-motion:reduce){.sa-g3-cursor{left:30%;top:80%}.sa-g3-env i{background-position:0 0}.sa-g3-cols i.sa-g3-move{transform:none}}

/* ───────── step illustrations, group 4: capture, editing, motion, AI portraits, photo restoration ───────── */
.sa-g4-folder,.sa-g4-style,.sa-g4-raw,.sa-g4-notes,.sa-g4-script,.sa-g4-board,.sa-g4-keys,.sa-g4-selfies,.sa-g4-gallery,.sa-g4-damage,.sa-g4-pix,.sa-g4-drive{width:78%;gap:2.6cqi}

/* folder rows (capture delivery, restoration drive) */
.sa-g4-fhead{display:flex;align-items:center;gap:2.4cqi}
.sa-g4-fhead i{width:7cqi;height:5.4cqi;border-radius:1cqi 1cqi 1.2cqi 1.2cqi;background:linear-gradient(180deg,#D9C78E,#A08B34);position:relative}
.sa-g4-fhead i::before{content:"";position:absolute;left:0;top:-1.2cqi;width:3.4cqi;height:1.6cqi;border-radius:.8cqi .8cqi 0 0;background:#C2AE66}
.flow__art .sa-g4-fhead .mk-t{font-size:5cqi}
.sa-g4-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2.2cqi;padding:2.2cqi 2.6cqi;border-radius:2.4cqi;background:#f5f5f7;font:500 2.9cqi/1.2 var(--body);color:#1d1d1f;animation:mk-in 7s ease infinite both}
.sa-g4-row:nth-of-type(3){animation-delay:.35s}.sa-g4-row:nth-of-type(4){animation-delay:.7s}.sa-g4-row:nth-of-type(5){animation-delay:1.05s}
.sa-g4-row i{width:3.6cqi;height:3.6cqi;border-radius:.8cqi;background:#1d1d1f}
.sa-g4-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-g4-row em{font:600 2.3cqi/1 var(--body);font-style:normal;color:#6e6e73;white-space:nowrap}

/* editing style */
.sa-g4-frame{position:relative;height:24cqi;border-radius:2.4cqi;background:linear-gradient(160deg,#3a3a3c,#1d1d1f);overflow:hidden}
.sa-g4-cap{position:absolute;left:50%;bottom:3cqi;transform:translateX(-50%);padding:1.4cqi 2.4cqi;border-radius:1.4cqi;background:#fff;font:700 3cqi/1 var(--body);color:#1d1d1f;white-space:nowrap;animation:sa-g4-pop 7s ease infinite}
.sa-g4-cap em{font-style:normal;color:#A08B34}
@keyframes sa-g4-pop{0%,10%{opacity:0;transform:translate(-50%,2cqi) scale(.9)}20%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.sa-g4-tokens{display:flex;align-items:center;gap:2cqi}
.sa-g4-tokens .aa{font:600 5cqi/1 var(--head);color:#1d1d1f;margin-right:1cqi}
.sa-g4-tokens i{width:6cqi;height:6cqi;border-radius:50%;animation:mk-in 7s ease infinite both}
.sa-g4-tokens .c1{background:#1d1d1f}.sa-g4-tokens .c2{background:#B49A45;animation-delay:.3s}.sa-g4-tokens .c3{background:#e8e8ed;animation-delay:.6s}

/* raw upload */
.sa-g4-up{display:grid;gap:1.4cqi;padding:2.2cqi 2.6cqi;border-radius:2.4cqi;background:#f5f5f7;font:500 2.9cqi/1.2 var(--body);color:#1d1d1f}
.sa-g4-bar{height:1.2cqi;border-radius:2cqi;background:#e3e3e8;overflow:hidden}
.sa-g4-bar i{display:block;height:100%;background:linear-gradient(90deg,#D9C78E,#A08B34);transform-origin:0 50%;animation:mk-grow 7s ease-in-out infinite}
.sa-g4-up:nth-of-type(3) .sa-g4-bar i{animation-delay:.5s}.sa-g4-up:nth-of-type(4) .sa-g4-bar i{animation-delay:1s}

/* review notes on the timeline */
.sa-g4-notes .sa-player{height:18cqi}
.sa-g4-tl{position:relative;height:2cqi;border-radius:2cqi;background:#e3e3e8}
.sa-g4-tl i{position:absolute;top:50%;width:3.4cqi;height:3.4cqi;margin:-1.7cqi 0 0 -1.7cqi;border-radius:50%;background:#B49A45;animation:mk-pulse 2.4s ease-in-out infinite}
.sa-g4-tl .p1{left:22%}.sa-g4-tl .p2{left:64%;animation-delay:1.2s}
.sa-g4-note{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2cqi;padding:1.8cqi 2.4cqi;border-radius:2cqi;background:#f5f5f7;font:500 2.8cqi/1.2 var(--body);color:#1d1d1f}
.sa-g4-note em{font:700 2.4cqi/1 var(--body);font-style:normal;color:#7a6519}
.sa-g4-note i{width:3.6cqi;height:3.6cqi;border-radius:50%;border:.5cqi solid #d2d2d7;animation:sa-rv-on 7s ease infinite}
.sa-g4-note:nth-of-type(2) i{animation-delay:.6s}
.sa-g4-fmts{display:flex;gap:1.6cqi;flex-wrap:wrap}
.sa-g4-fmts span{padding:1.3cqi 2.2cqi;border-radius:9cqi;background:#1d1d1f;color:#fff;font:600 2.4cqi/1 var(--body);animation:mk-in 7s ease infinite both;animation-delay:1.4s}
.sa-g4-fmts span:nth-child(2){animation-delay:1.7s}.sa-g4-fmts span:nth-child(3){animation-delay:2s}

/* motion script */
.sa-g4-scene{display:grid;gap:1.2cqi;padding:2.2cqi 2.6cqi;border-radius:2.4cqi;background:#f5f5f7;animation:mk-in 7s ease infinite both}
.sa-g4-scene:nth-of-type(3){animation-delay:.4s}.sa-g4-scene:nth-of-type(4){animation-delay:.8s}
.sa-g4-scene small{font:700 2.3cqi/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#7a6519}
.sa-g4-voice{display:flex;align-items:center;gap:1.2cqi;font:600 2.3cqi/1 var(--body);color:#6e6e73}
.sa-g4-voice i{width:2.6cqi;height:2.6cqi;border-radius:50%;background:#B49A45;animation:mk-pulse 1.6s ease-in-out infinite}

/* storyboard + palette */
.sa-g4-frames{display:grid;grid-template-columns:1fr 1fr;gap:2cqi}
.sa-g4-frames div{position:relative;aspect-ratio:16/10;border-radius:1.8cqi;background:#f2f2f5;border:.4cqi solid #e3e3e8;animation:mk-in 7s ease infinite both}
.sa-g4-frames div:nth-child(2){animation-delay:.3s}.sa-g4-frames div:nth-child(3){animation-delay:.6s}.sa-g4-frames div:nth-child(4){animation-delay:.9s}
.sa-g4-frames span{position:absolute;left:1.4cqi;top:1.2cqi;font:700 2.2cqi/1 var(--body);color:#86868b}
.sa-g4-frames i{position:absolute;left:30%;top:30%;width:40%;height:40%;border-radius:50%;background:linear-gradient(135deg,#EFE2B4,#A08B34);opacity:.75}
.sa-g4-frames div:nth-child(even) i{border-radius:1cqi;background:#1d1d1f;opacity:.85}
.sa-g4-pal{display:flex;align-items:center;gap:1.6cqi}
.sa-g4-pal i{width:5cqi;height:5cqi;border-radius:1.2cqi}
.sa-g4-pal i:nth-child(1){background:#1d1d1f}.sa-g4-pal i:nth-child(2){background:#B49A45}.sa-g4-pal i:nth-child(3){background:#D9C78E}.sa-g4-pal i:nth-child(4){background:#e8e8ed}
.sa-g4-pal small{margin-left:1cqi;font:600 2.4cqi/1 var(--body);color:#6e6e73}

/* motion keyframes */
.sa-g4-curve{width:100%;height:auto;background:#f5f5f7;border-radius:2cqi;padding:2cqi}
.sa-g4-curve path{fill:none;stroke:#B49A45;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:130;stroke-dashoffset:130;animation:sa-draw 7s ease-in-out infinite}
.sa-g4-track{position:relative;height:5cqi;border-radius:1.4cqi;background:#f2f2f5}
.sa-g4-track i{position:absolute;left:var(--x);top:50%;width:2.6cqi;height:2.6cqi;margin-top:-1.3cqi;background:#1d1d1f;transform:rotate(45deg);border-radius:.4cqi}
.sa-g4-track.t2 i{background:#B49A45}
.sa-g4-track b{position:absolute;top:0;bottom:0;width:.4cqi;background:#d23c3c;animation:sa-g4-head 7s linear infinite}
@keyframes sa-g4-head{from{left:2%}to{left:96%}}

/* selfies grid */
.sa-g4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqi}
.sa-g4-grid i{aspect-ratio:3/4;border-radius:1.6cqi;background:radial-gradient(circle at 50% 38%,#d9b99b 0 22%,transparent 23%),linear-gradient(180deg,#e9e3dc 60%,#cfc6bb 60%);animation:mk-in 7s ease infinite both;animation-delay:var(--d)}
.sa-g4-count{display:flex;justify-content:space-between;font:600 2.8cqi/1 var(--body);color:#6e6e73}
.sa-g4-count em{font-style:normal;color:#2F6B3A}

/* portrait gallery */
.sa-g4-photos{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1.8cqi}
.sa-g4-photos i{aspect-ratio:4/5;border-radius:1.8cqi;background:radial-gradient(circle at 50% 36%,#c99a74 0 20%,transparent 21%),radial-gradient(ellipse at 50% 100%,#2c2c2e 0 46%,transparent 47%),linear-gradient(160deg,#EFE2B4,#A08B34);animation:mk-in 7s ease infinite both}
.sa-g4-photos i:nth-child(2){background:radial-gradient(circle at 50% 36%,#c99a74 0 20%,transparent 21%),radial-gradient(ellipse at 50% 100%,#e8e8ed 0 46%,transparent 47%),linear-gradient(160deg,#3a3a3c,#1d1d1f);animation-delay:.3s}
.sa-g4-photos i:nth-child(3){animation-delay:.6s;filter:grayscale(1)}

/* WhatsApp photo */
.sa-g4-whats{gap:2.4cqi}.sa-g4-whats .sa-b{font-size:3cqi;padding:2.6cqi 3.2cqi}
.sa-g4-photo{align-self:flex-start;width:46%;padding:1.4cqi;border-radius:3cqi;background:#fff;animation:mk-in 7s ease infinite both;animation-delay:.5s}
.sa-g4-photo i{display:block;aspect-ratio:4/3;border-radius:2cqi;background:radial-gradient(circle at 50% 40%,#9c8a72 0 18%,transparent 19%),linear-gradient(160deg,#cbb89a,#8d7a5c);filter:sepia(.6)}
.sa-g4-whats .sa-b.out{animation-delay:1.1s}

/* damage assessment */
.sa-g4-old{position:relative;height:28cqi;border-radius:2cqi;overflow:hidden;background:radial-gradient(circle at 50% 40%,#9c8a72 0 16%,transparent 17%),linear-gradient(160deg,#d8c7a8,#8d7a5c);filter:sepia(.5)}
.sa-g4-old i{position:absolute;left:10%;top:0;width:3cqi;height:100%;background:linear-gradient(180deg,transparent,#f5efe4 30%,#f5efe4 70%,transparent);transform:rotate(14deg);opacity:.8}
.sa-g4-old .sa-pin{animation:mk-in 7s ease infinite both}
.sa-g4-old .sa-pin:nth-of-type(2){animation-delay:.4s}.sa-g4-old .sa-pin:nth-of-type(3){animation-delay:.8s}
.sa-g4-dmg{display:flex;gap:1.4cqi;flex-wrap:wrap}
.sa-g4-dmg span{padding:1.2cqi 2cqi;border-radius:9cqi;background:#fbe4e2;color:#b3261e;font:600 2.3cqi/1 var(--body)}

/* pix payment */
.sa-g4-ok{display:flex;align-items:center;gap:2.4cqi;padding:2.4cqi 2.6cqi;border-radius:2.4cqi;background:#e3f0e5;font:600 3cqi/1.2 var(--body);color:#2F6B3A}
.sa-g4-ok i{flex:none;width:5cqi;height:5cqi;border-radius:50%;background:#3E9150;position:relative;animation:mk-pulse 2.4s ease-in-out infinite}
.sa-g4-ok i::after{content:"";position:absolute;left:50%;top:22%;width:1.4cqi;height:2.4cqi;border:solid #fff;border-width:0 .5cqi .5cqi 0;transform:translateX(-50%) rotate(45deg)}

/* drive delivery thumb */
.sa-g4-thumb{height:18cqi;border-radius:2cqi;overflow:hidden}
.sa-g4-thumb i{display:block;height:100%;background:radial-gradient(circle at 50% 40%,#b48d6a 0 16%,transparent 17%),linear-gradient(160deg,#eadfcf,#a8917a)}

@media (prefers-reduced-motion:reduce){.sa-g4-curve path{stroke-dashoffset:0}.sa-g4-track b{left:60%}.sa-g4-note i{background:#1d1d1f;border-color:#1d1d1f}}

/* ───────── step illustrations for Google Meu Negócio: presence audit, business profile, search result, AI answer ───────── */
.sa-gma,.sa-gmp,.sa-gms,.sa-gmai{gap:2.8cqi;width:78%}

/* audit: statuses light up one by one */
.sa-gma .sa-file2 em{animation:sa-gm-st 7s ease infinite both}
.sa-gma .sa-file2:nth-of-type(3) em{animation-delay:.5s}.sa-gma .sa-file2:nth-of-type(4) em{animation-delay:1s}.sa-gma .sa-file2:nth-of-type(5) em{animation-delay:1.5s}
@keyframes sa-gm-st{0%,10%{opacity:0;transform:scale(.6)}20%,90%{opacity:1;transform:none}100%{opacity:0;transform:scale(.6)}}

/* business profile */
.sa-gmp{padding-top:4cqi}
.sa-gmp__map{position:relative;height:16cqi;border-radius:2.4cqi;background:linear-gradient(135deg,#eef1ea 25%,#e4e9df 25% 50%,#eef1ea 50% 75%,#e4e9df 75%) 0 0/8cqi 8cqi;overflow:hidden}
.sa-gmp__map i{position:absolute;left:50%;top:50%;width:5cqi;height:5cqi;margin:-4cqi 0 0 -2.5cqi;border-radius:50% 50% 50% 0;background:#d23c3c;transform:rotate(-45deg);animation:sa-gm-pin 2.4s ease-in-out infinite}
.sa-gmp__map i::after{content:"";position:absolute;left:50%;top:50%;width:1.8cqi;height:1.8cqi;margin:-.9cqi 0 0 -.9cqi;border-radius:50%;background:#fff}
@keyframes sa-gm-pin{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(.8cqi,-.8cqi)}}
.flow__art .sa-gmp .mk-t{font-size:4.6cqi}
.sa-gmp__stars{display:flex;align-items:center;gap:.8cqi;font:600 3cqi/1 var(--body);color:#1d1d1f}
.sa-gmp__stars i{width:3cqi;height:3cqi;background:#e8b400;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:sa-gm-star 7s ease infinite both}
.sa-gmp__stars i:nth-of-type(2){animation-delay:.15s}.sa-gmp__stars i:nth-of-type(3){animation-delay:.3s}.sa-gmp__stars i:nth-of-type(4){animation-delay:.45s}.sa-gmp__stars i:nth-of-type(5){animation-delay:.6s}
@keyframes sa-gm-star{0%,8%{transform:scale(0)}16%,92%{transform:none}100%{transform:scale(0)}}
.sa-gmp__stars small{font:500 2.6cqi/1 var(--body);color:#86868b;margin-left:.6cqi}
.sa-gmp__cat{font:500 2.6cqi/1.2 var(--body);color:#6e6e73}
.sa-gmp__btns{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqi}
.sa-gmp__btns span{display:grid;place-items:center;padding:2cqi 0;border-radius:9cqi;border:1px solid #d2d2d7;font:600 2.6cqi/1 var(--body);color:#1a56db}
.sa-gmp__btns span:first-child{background:#1a56db;border-color:#1a56db;color:#fff}

/* search result climbs to the top */
.sa-gms{position:relative}
.sa-gms__bar{display:flex;align-items:center;gap:2cqi;padding:2.2cqi 3cqi;border-radius:9cqi;background:#f2f2f5;font:500 2.8cqi/1 var(--body);color:#1d1d1f}
.sa-gms__bar svg{width:3.6cqi;height:3.6cqi;flex:none}
.sa-gms__bar span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sa-gms__list{display:flex;flex-direction:column;gap:2cqi}
.sa-gms__r{display:grid;gap:1.2cqi;padding:2.2cqi;border-radius:2.2cqi;background:#f7f7f9}
.sa-gms__r .mk-l{height:1.4cqi;background:#e3e3e8}
.sa-gms__r.mine{position:relative;z-index:1;background:#fff;box-shadow:0 0 0 .4cqi #B49A45;animation:sa-gm-climb 7s ease infinite}
.sa-gms__r.other{animation:sa-gm-drop 7s ease infinite}
.sa-gms__r.mine small{font:500 2.3cqi/1 var(--body);color:#2F6B3A}
.sa-gms__r.mine b{font:600 2.9cqi/1.2 var(--body);color:#1a0dab}
@keyframes sa-gm-climb{0%,25%{transform:translateY(calc(150% + 3cqi));opacity:.7}38%,90%{transform:none;opacity:1}100%{transform:translateY(calc(150% + 3cqi));opacity:.7}}
@keyframes sa-gm-drop{0%,25%{transform:translateY(calc(-100% - 6cqi))}38%,90%{transform:none}100%{transform:translateY(calc(-100% - 6cqi))}}
.sa-gms__speed{position:absolute;right:-3cqi;top:-3cqi;width:12cqi;height:12cqi;border-radius:50%;background:#fff;box-shadow:0 0 0 1cqi #e3f0e5,0 4cqi 8cqi -4cqi rgba(0,0,0,.3);display:grid;place-items:center;align-content:center;animation:mk-pulse 2.8s ease-in-out infinite}
.sa-gms__speed span{font:700 4cqi/1 var(--head);color:#2F6B3A}
.sa-gms__speed small{font:600 1.6cqi/1 var(--body);color:#6e6e73}

/* AI answer types and cites the business */
.sa-gmai__head{display:flex;align-items:center;gap:2cqi}
.sa-gmai__head i{width:4.6cqi;height:4.6cqi;border-radius:50%;background:conic-gradient(#EFE2B4,#A08B34,#1d1d1f,#EFE2B4);animation:sa-gm-spin 4s linear infinite}
@keyframes sa-gm-spin{to{transform:rotate(360deg)}}
.flow__art .sa-gmai__head .mk-t{font-size:4.2cqi}
.sa-gmai__q{margin:0;padding:2.2cqi 2.6cqi;border-radius:2.4cqi;background:#f2f2f5;font:500 2.8cqi/1.35 var(--body);color:#1d1d1f}
.sa-gmai__a{margin:0;font:500 3cqi/1.45 var(--body);color:#1d1d1f;min-height:13cqi}
.sa-gmai__a span{display:inline;background:linear-gradient(#fff,#fff) right/100% 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:sa-gm-type 7s steps(30) infinite}
@keyframes sa-gm-type{0%,10%{background-size:100% 100%}55%,92%{background-size:0 100%}100%{background-size:100% 100%}}
.sa-gmai__src{display:flex;align-items:center;gap:2cqi;flex-wrap:wrap}
.sa-gmai__src small{font:600 2.4cqi/1 var(--body);color:#86868b}
.sa-gmai__src span{padding:1.4cqi 2.2cqi;border-radius:9cqi;background:#f5f0e1;font:600 2.5cqi/1 var(--body);color:#7a6519;animation:sa-gm-st 7s ease infinite both;animation-delay:3.4s}

@media (prefers-reduced-motion:reduce){.sa-gma .sa-file2 em,.sa-gmp__stars i,.sa-gmai__src span{opacity:1;transform:none}.sa-gms__r.mine,.sa-gms__r.other{opacity:1;transform:none}.sa-gmai__a span{background-size:0 100%}}

/* implementação de sites: project received, Figma evaluated, Figma vs site, staging checks */
.sa-im{gap:2.6cqi;width:78%}
.sa-im .sa-kv{font-size:2.9cqi}
.sa-im-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqi}
.sa-im-frames i{height:9cqi;border-radius:1.6cqi;background:#f2f2f5;outline:.4cqi solid transparent;animation:sa-im-scan 7s ease infinite}
.sa-im-frames i:nth-child(2){animation-delay:.3s}.sa-im-frames i:nth-child(3){animation-delay:.6s}.sa-im-frames i:nth-child(4){animation-delay:.9s}.sa-im-frames i:nth-child(5){animation-delay:1.2s}.sa-im-frames i:nth-child(6){animation-delay:1.5s}
@keyframes sa-im-scan{0%,10%{outline-color:transparent}20%,88%{outline-color:#B49A45}100%{outline-color:transparent}}
.sa-im-split{width:84%;display:grid;grid-template-columns:1fr 1fr;gap:3cqi}
.sa-im-split>div{display:grid;gap:1.8cqi;align-content:start;padding:3.4cqi;border-radius:3cqi;background:#fff;box-shadow:0 6cqi 12cqi -6cqi rgba(0,0,0,.4)}
.sa-im-split small{font:700 2.4cqi/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#7a6519}
.sa-im-split b{height:12cqi;border-radius:1.6cqi;background:linear-gradient(135deg,#EFE2B4,#A08B34)}
.sa-im-split .mk-l{height:1.4cqi;background:#e3e3e8}
.sa-im-split .r{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqi}
.sa-im-split .r i{height:6cqi;border-radius:1cqi;background:#f2f2f5}
.sa-im-split .fig{outline:.4cqi dashed #B49A45;outline-offset:-1.2cqi}
.sa-im-split .web>*{animation:mk-in 7s ease infinite both}
.sa-im-split .web>*:nth-child(3){animation-delay:.3s}.sa-im-split .web>*:nth-child(4){animation-delay:.6s}.sa-im-split .web>*:nth-child(5){animation-delay:.9s}
.sa-im-stage .sa-rv{font-size:3.2cqi}
.sa-im-stage .mk-win__bar span{font-size:2.2cqi}
@media (prefers-reduced-motion:reduce){.sa-im-frames i{outline-color:#B49A45}.sa-im-split .web>*{opacity:1;transform:none}}

/* modelagem 3d: references checked, detailed mesh, material swatches */
.sa-m3{gap:2.4cqi;width:78%}
.sa-m3 .sa-kv{font-size:2.9cqi}
.sa-m3-ref{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqi}
.sa-m3-ref i{height:10cqi;border-radius:1.6cqi;background:#f2f2f5;outline:.4cqi solid transparent;animation:sa-m3-scan 7s ease infinite}
.sa-m3-ref i:nth-child(2){animation-delay:.4s}.sa-m3-ref i:nth-child(3){animation-delay:.8s}
@keyframes sa-m3-scan{0%,10%{outline-color:transparent}25%,85%{outline-color:#B49A45}100%{outline-color:transparent}}
.sa-m3-svg{width:100%;fill:none;stroke:#1d1d1f;stroke-width:.9;stroke-linejoin:round}
.sa-m3-svg .g{stroke:#B49A45;stroke-width:.6;stroke-dasharray:2 1.6;animation:sa-flowline 1.6s linear infinite}
.sa-m3-mats{display:grid;gap:1.8cqi}
.sa-m3-mats div{display:flex;align-items:center;gap:2cqi;font:600 3cqi/1 var(--body);color:#1d1d1f}
.sa-m3-mats i{width:7cqi;height:7cqi;border-radius:50%;flex:none;animation:mk-in 7s ease infinite both}
.sa-m3-mats .a{background:linear-gradient(135deg,#f5f5f7,#9a9aa0 60%,#e3e3e8)}
.sa-m3-mats .b{background:linear-gradient(135deg,#d9a86c,#8a5a2b);animation-delay:.3s}
.sa-m3-mats .c{background:radial-gradient(circle at 35% 30%,#4a4a4f,#1d1d1f);animation-delay:.6s}
@media (prefers-reduced-motion:reduce){.sa-m3-ref i{outline-color:#B49A45}.sa-m3-svg .g,.sa-m3-mats i{animation:none;opacity:1;transform:none}}

/* ───────── step illustrations for the Foto e vídeo pages: formats, 3D cube, render, photo shoot, VSL script, e-commerce banners, thumbnails ───────── */
.sa-fmts,.sa-render,.sa-vsl{gap:2.8cqi;width:78%}

/* video formats: three frames in their aspect ratios */
.sa-fmts__row{display:flex;align-items:flex-end;justify-content:center;gap:3cqi;height:30cqi}
.sa-fmts__row div{display:grid;justify-items:center;gap:1.6cqi}
.sa-fmts__row i{display:block;border-radius:1.6cqi;background:linear-gradient(160deg,#2c2c2e,#1d1d1f);position:relative;animation:mk-in 7s ease infinite both}
.sa-fmts__row i::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-1.6cqi 0 0 -.8cqi;border-left:2.6cqi solid #D9C78E;border-top:1.6cqi solid transparent;border-bottom:1.6cqi solid transparent}
.sa-fmts__row .v i{width:13cqi;height:23cqi}
.sa-fmts__row .h i{width:24cqi;height:13.5cqi;animation-delay:.3s}
.sa-fmts__row .q i{width:16cqi;height:16cqi;animation-delay:.6s}
.sa-fmts__row span{font:700 2.8cqi/1 var(--body);color:#1d1d1f}
.sa-fmts small{font:600 2.6cqi/1.2 var(--body);color:#6e6e73;text-align:center}

/* 3D modelling: a wireframe cube turning */
.sa-cube{width:44%;aspect-ratio:1;perspective:90cqi;display:grid;place-items:center}
.sa-cube__in{position:relative;width:26cqi;height:26cqi;transform-style:preserve-3d;animation:sa-cube 8s linear infinite}
.sa-cube__in i{position:absolute;inset:0;border:.5cqi solid #A08B34;background:rgba(239,226,180,.18);box-shadow:inset 0 0 0 .3cqi rgba(255,255,255,.4)}
.sa-cube__in i::before,.sa-cube__in i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.4%,rgba(160,139,52,.45) 49.4% 50.6%,transparent 50.6%),linear-gradient(0deg,transparent 49.4%,rgba(160,139,52,.45) 49.4% 50.6%,transparent 50.6%)}
.sa-cube__in .f{transform:translateZ(13cqi)}.sa-cube__in .b{transform:rotateY(180deg) translateZ(13cqi)}
.sa-cube__in .l{transform:rotateY(-90deg) translateZ(13cqi)}.sa-cube__in .r{transform:rotateY(90deg) translateZ(13cqi)}
.sa-cube__in .t{transform:rotateX(90deg) translateZ(13cqi)}.sa-cube__in .u{transform:rotateX(-90deg) translateZ(13cqi)}
@keyframes sa-cube{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}

/* render: frames fill in while the bar advances */
.sa-render__frames{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqi}
.sa-render__frames i{aspect-ratio:16/10;border-radius:1.4cqi;background:#f2f2f5;animation:sa-frame 7s ease infinite}
.sa-render__frames i:nth-child(2){animation-delay:.5s}.sa-render__frames i:nth-child(3){animation-delay:1s}.sa-render__frames i:nth-child(4){animation-delay:1.5s}.sa-render__frames i:nth-child(5){animation-delay:2s}.sa-render__frames i:nth-child(6){animation-delay:2.5s}
@keyframes sa-frame{0%,8%{background:#f2f2f5}16%,88%{background:linear-gradient(135deg,#EFE2B4,#A08B34)}100%{background:#f2f2f5}}
.sa-render .sa-bar{margin:0}
.sa-render .sa-bar i{background:linear-gradient(90deg,#D9C78E,#A08B34);animation-duration:7s}
.sa-render small{font:600 2.6cqi/1 var(--body);color:#6e6e73}

/* photo shoot: viewfinder, focus box and a flash */
.sa-shoot{position:relative;width:76%;aspect-ratio:4/3;border-radius:4cqi;overflow:hidden;background:radial-gradient(70% 70% at 50% 40%,#fbfbfd,#e3e3e8);box-shadow:0 8cqi 16cqi -8cqi rgba(0,0,0,.4)}
.sa-shoot__obj{position:absolute;left:38%;top:30%;width:24%;aspect-ratio:1/1.4;border-radius:2cqi 2cqi 1.4cqi 1.4cqi;background:linear-gradient(90deg,#efe3cc,#d9c48f);box-shadow:0 4cqi 6cqi -3cqi rgba(0,0,0,.3)}
.sa-shoot>i{position:absolute;width:7cqi;height:7cqi;border-color:#1d1d1f;border-style:solid;border-width:0}
.sa-shoot .tl{left:5cqi;top:5cqi;border-left-width:.6cqi;border-top-width:.6cqi}.sa-shoot .tr{right:5cqi;top:5cqi;border-right-width:.6cqi;border-top-width:.6cqi}
.sa-shoot .bl{left:5cqi;bottom:5cqi;border-left-width:.6cqi;border-bottom-width:.6cqi}.sa-shoot .br{right:5cqi;bottom:5cqi;border-right-width:.6cqi;border-bottom-width:.6cqi}
.sa-shoot__focus{position:absolute;left:34%;top:25%;width:32%;height:52%;border:.5cqi solid #B49A45;border-radius:1cqi;animation:sa-focus 7s ease infinite}
@keyframes sa-focus{0%,10%{transform:scale(1.3);opacity:.3}25%,90%{transform:none;opacity:1}100%{transform:scale(1.3);opacity:.3}}
.sa-shoot__flash{position:absolute;inset:0;background:#fff;opacity:0;animation:sa-flash 7s ease infinite}
@keyframes sa-flash{0%,40%{opacity:0}43%{opacity:.95}52%,100%{opacity:0}}

/* VSL script: four blocks light in sequence */
.sa-vsl__blk{display:grid;gap:1.4cqi;padding:2.2cqi 2.6cqi;border-radius:2.4cqi;background:#f5f5f7;animation:sa-vsl 7s ease infinite}
.sa-vsl__blk:nth-of-type(3){animation-delay:.6s}.sa-vsl__blk:nth-of-type(4){animation-delay:1.2s}.sa-vsl__blk:nth-of-type(5){animation-delay:1.8s}
.sa-vsl__blk em{font:700 2.6cqi/1 var(--body);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#7a6519}
.sa-vsl__blk .mk-l{height:1.4cqi;background:#d2d2d7}
@keyframes sa-vsl{0%,8%{box-shadow:none}14%,30%{box-shadow:0 0 0 .5cqi #B49A45}38%,100%{box-shadow:none}}

/* e-commerce banner with a discount stamp */
.sa-banner{position:relative;width:84%;display:grid;grid-template-columns:1fr 1.1fr;gap:3cqi;align-items:center;padding:4cqi;border-radius:4cqi;background:linear-gradient(135deg,#1d1d1f,#3a3a3c);box-shadow:0 8cqi 16cqi -8cqi rgba(0,0,0,.45);animation:mk-float 6s ease-in-out infinite}
.sa-banner .mk-ph{aspect-ratio:1;border-radius:2.4cqi}
.sa-banner__txt{display:grid;gap:1.8cqi;justify-items:start}
.sa-banner__txt small{font:700 2.2cqi/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#D9C78E}
.flow__art .sa-banner__txt .mk-t{font-size:5.6cqi;line-height:1;color:#fff}
.flow__art .sa-banner .mk-btn{font-size:2.8cqi;padding:2.2cqi 3.4cqi;margin-top:0;background:linear-gradient(135deg,#EFE2B4,#A08B34);color:#1d1d1f}
.sa-banner__tag{position:absolute;right:3cqi;top:-3cqi;width:13cqi;height:13cqi;border-radius:50%;display:grid;place-items:center;background:#b3261e;color:#fff;font:800 3.4cqi/1 var(--body);font-style:normal;box-shadow:0 3cqi 6cqi -2cqi rgba(0,0,0,.4);animation:sa-stamp 7s ease infinite}
@keyframes sa-stamp{0%,20%{transform:scale(0) rotate(-30deg)}30%,90%{transform:rotate(-10deg)}100%{transform:scale(0) rotate(-30deg)}}

/* the same banner in three formats */
.sa-ecf{width:84%;display:flex;align-items:flex-end;justify-content:center;gap:3cqi}
.sa-ecf>div{display:grid;gap:1.2cqi;padding:2cqi;border-radius:2.4cqi;background:#1d1d1f;box-shadow:0 6cqi 12cqi -6cqi rgba(0,0,0,.4);animation:mk-in 7s ease infinite both}
.sa-ecf .d{width:44%;grid-template-columns:1fr 1fr;align-items:center}
.sa-ecf .m{width:20%;animation-delay:.4s}
.sa-ecf .s{width:24%;background:#fff;animation-delay:.8s}
.sa-ecf .mk-ph{aspect-ratio:1;border-radius:1.2cqi}
.sa-ecf .d .mk-ph{grid-row:span 2}
.sa-ecf b{height:2cqi;border-radius:1cqi;background:#D9C78E}
.sa-ecf .s b{background:#1d1d1f;width:70%}
.sa-ecf i{height:3cqi;border-radius:1cqi;background:linear-gradient(135deg,#EFE2B4,#A08B34)}

/* thumbnail: big text, a face, play button */
.sa-thumb{position:relative;width:84%;aspect-ratio:16/9;border-radius:3cqi;overflow:hidden;background:linear-gradient(120deg,#1d1d1f 45%,#A08B34);box-shadow:0 8cqi 16cqi -8cqi rgba(0,0,0,.45);animation:mk-float 6s ease-in-out infinite}
.sa-thumb__face{position:absolute;right:4%;bottom:0;width:38%;aspect-ratio:1;border-radius:50% 50% 0 0;background:radial-gradient(circle at 50% 38%,#f1d3b3 0 26%,transparent 27%),radial-gradient(circle at 50% 100%,#3a3a3c 0 52%,transparent 53%)}
.sa-thumb__txt{position:absolute;left:6%;top:14%;font:900 6.4cqi/1 var(--head);color:#fff;letter-spacing:-.02em;text-shadow:0 .6cqi 0 #1d1d1f;animation:sa-pop 7s ease infinite}
@keyframes sa-pop{0%,10%{transform:scale(.7);opacity:0}22%,90%{transform:none;opacity:1}100%{transform:scale(.7);opacity:0}}
.sa-thumb__play{position:absolute;left:6%;bottom:12%;width:12cqi;height:8cqi;border-radius:2cqi;background:#b3261e}
.sa-thumb__play::after{content:"";position:absolute;left:50%;top:50%;margin:-1.6cqi 0 0 -1cqi;border-left:2.8cqi solid #fff;border-top:1.6cqi solid transparent;border-bottom:1.6cqi solid transparent}
.sa-thumb em{position:absolute;right:3cqi;bottom:2.4cqi;padding:.8cqi 1.4cqi;border-radius:1cqi;background:rgba(0,0,0,.75);color:#fff;font:600 2.2cqi/1 var(--body);font-style:normal}

/* A/B thumbnails */
.sa-thab{width:84%;display:grid;grid-template-columns:1fr 1fr;gap:3cqi}
.sa-thab__card{display:grid;gap:1.6cqi;padding:2.2cqi;border-radius:2.6cqi;background:#fff;box-shadow:0 6cqi 12cqi -6cqi rgba(0,0,0,.35)}
.sa-thab__img{position:relative;aspect-ratio:16/9;border-radius:1.6cqi;overflow:hidden;background:linear-gradient(120deg,#3a3a3c,#6e6e73)}
.sa-thab__card.win .sa-thab__img{background:linear-gradient(120deg,#1d1d1f 45%,#A08B34)}
.sa-thab__img i{position:absolute;right:6%;bottom:0;width:36%;aspect-ratio:1;border-radius:50% 50% 0 0;background:radial-gradient(circle at 50% 38%,#f1d3b3 0 26%,transparent 27%)}
.sa-thab__img b{position:absolute;left:8%;top:22%;width:44%;height:3cqi;border-radius:1cqi;background:#fff;box-shadow:0 4.4cqi 0 #fff}
.sa-thab__card span{font:600 2.8cqi/1 var(--body);color:#1d1d1f}
.sa-thab__card em{font:700 3cqi/1 var(--body);font-style:normal;color:#6e6e73}
.sa-thab__card.win em{color:#2F6B3A}
.sa-thab__card.win{animation:sa-win 7s ease infinite}

@media (prefers-reduced-motion:reduce){.sa-cube__in{transform:rotateX(-22deg) rotateY(35deg)}.sa-shoot__flash{opacity:0}.sa-banner__tag{transform:rotate(-10deg)}.sa-thumb__txt{transform:none;opacity:1}.sa-render__frames i{background:linear-gradient(135deg,#EFE2B4,#A08B34)}}

/* ───────── step illustrations for Time comercial (funnel, pipeline, playbook, call) and Tráfego pago (diagnosis, plan, tracking, campaigns, A/B, report) ───────── */
.sa-funnel,.sa-pipe,.sa-play,.sa-diag,.sa-plan,.sa-track2,.sa-camp,.sa-ab,.sa-tpr{gap:2.8cqi;width:78%}

/* funnel: stages narrow, the leaking one is flagged */
.sa-fn{position:relative;display:flex;justify-content:space-between;align-items:center;padding:2.4cqi 3cqi;font:600 3.2cqi/1 var(--body);color:#1d1d1f;width:var(--w);min-width:46%;margin:0 auto}
.sa-fn i{position:absolute;inset:0;border-radius:2.4cqi;background:#f2f2f5;transform-origin:50% 50%;animation:sa-fn-in 7s ease infinite both}
.sa-fn span,.sa-fn em{position:relative}
.sa-fn em{font-style:normal;color:#6e6e73}
.sa-fn:nth-of-type(3) i{animation-delay:.2s}.sa-fn:nth-of-type(4) i{animation-delay:.4s}.sa-fn:nth-of-type(5) i{animation-delay:.6s}
.sa-fn.is-leak i{animation-name:sa-fn-in,sa-fn-leak}
@keyframes sa-fn-in{0%{transform:scaleX(.2);opacity:0}18%,92%{transform:none;opacity:1}100%{transform:scaleX(.2);opacity:0}}
@keyframes sa-fn-leak{0%,35%{background:#f2f2f5}45%,90%{background:#fbe4e2}100%{background:#f2f2f5}}

/* pipeline: five stages, a dot walks through them */
.sa-pipe{position:relative}
.sa-stage{display:flex;align-items:center;gap:2.6cqi;font:500 3.2cqi/1.2 var(--body);color:#1d1d1f}
.sa-stage i{flex:none;width:6cqi;height:6cqi;border-radius:50%;background:#f2f2f5;font:700 2.6cqi/6cqi var(--body);font-style:normal;text-align:center;color:#6e6e73;animation:sa-stage 7s ease infinite}
.sa-stage:nth-of-type(3) i{animation-delay:.9s}.sa-stage:nth-of-type(4) i{animation-delay:1.8s}.sa-stage:nth-of-type(5) i{animation-delay:2.7s}.sa-stage:nth-of-type(6) i{animation-delay:3.6s}
@keyframes sa-stage{0%,8%{background:#f2f2f5;color:#6e6e73}14%,85%{background:#1d1d1f;color:#fff}100%{background:#f2f2f5;color:#6e6e73}}
.sa-pipe__dot{display:none}
.sa-stage:last-of-type i{animation-name:sa-stage-gold}
@keyframes sa-stage-gold{0%,8%{background:#f2f2f5;color:#6e6e73}14%,85%{background:#B49A45;color:#1d1d1f}100%{background:#f2f2f5;color:#6e6e73}}

/* playbook: an objection and the prepared answer */
.sa-play small{font:600 2.6cqi/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#7a6519}
.sa-play .sa-b{font-size:3.1cqi;max-width:92%}
.sa-play .sa-b.in{background:#f2f2f5}
.sa-play .sa-b.out{animation-delay:.9s}
.sa-play .sa-guard{background:#f5f5f7}

/* online call: four tiles, the speaker lights up */
.sa-call{width:80%;display:grid;gap:3cqi;padding:3cqi;border-radius:5cqi;background:#1d1d1f;box-shadow:0 8cqi 16cqi -8cqi rgba(0,0,0,.45);animation:mk-float 6s ease-in-out infinite}
.sa-call__grid{display:grid;grid-template-columns:1fr 1fr;gap:2cqi}
.sa-call__grid div{aspect-ratio:4/3;border-radius:2.6cqi;background:#2c2c2e;display:grid;place-items:center}
.sa-call__grid i{width:9cqi;height:9cqi;border-radius:50%;background:#48484a}
.sa-call__grid div.on{box-shadow:0 0 0 .6cqi #B49A45;animation:sa-speak 1.6s ease-in-out infinite}
.sa-call__grid div.on i{background:linear-gradient(135deg,#EFE2B4,#A08B34)}
@keyframes sa-speak{50%{box-shadow:0 0 0 1.2cqi rgba(180,154,69,.55)}}
.sa-call__bar{display:flex;justify-content:center;gap:2.4cqi}
.sa-call__bar span{width:6cqi;height:6cqi;border-radius:50%;background:#3a3a3c}
.sa-call__bar span.end{background:#b3261e}

/* key/value rows (diagnosis, plan) */
.sa-kv{display:flex;justify-content:space-between;align-items:center;gap:2cqi;padding:2.2cqi 2.6cqi;border-radius:2.4cqi;background:#f5f5f7;font:500 3cqi/1.2 var(--body);color:#6e6e73;animation:mk-in 7s ease infinite both}
.sa-kv em{font-style:normal;font-weight:600;color:#1d1d1f;text-align:right}
.sa-kv.warn em{color:#7a6519}
.sa-kv:nth-of-type(3){animation-delay:.3s}.sa-kv:nth-of-type(4){animation-delay:.6s}
.sa-map{position:relative;height:16cqi;border-radius:2.4cqi;background:linear-gradient(135deg,#f2f2f5 25%,#e8e8ed 25% 50%,#f2f2f5 50% 75%,#e8e8ed 75%) 0 0/8cqi 8cqi}
.sa-map i{position:absolute;left:50%;top:50%;width:11cqi;height:11cqi;margin:-5.5cqi 0 0 -5.5cqi;border-radius:50%;border:.5cqi solid #B49A45;background:rgba(180,154,69,.18);animation:mk-pulse 2.4s ease-in-out infinite}
.sa-plan .sa-sig{width:50%;margin:0}

/* tracking events fire one after another */
.sa-ev{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2.4cqi;padding:2.4cqi 2.6cqi;border-radius:2.4cqi;background:#f5f5f7;font:500 3cqi/1.2 var(--body);color:#1d1d1f}
.sa-ev i{width:3.2cqi;height:3.2cqi;border-radius:50%;background:#3E9150;animation:sa-ev 2.4s ease-in-out infinite}
.sa-ev:nth-of-type(3) i{animation-delay:.8s}.sa-ev:nth-of-type(4) i{animation-delay:1.6s}
.sa-ev em{font:600 2.4cqi/1 var(--body);font-style:normal;padding:1.2cqi 1.8cqi;border-radius:9cqi;background:#e3f0e5;color:#2F6B3A}
@keyframes sa-ev{0%,100%{box-shadow:0 0 0 0 rgba(62,145,80,.5)}50%{box-shadow:0 0 0 1.6cqi rgba(62,145,80,0)}}

/* campaigns switch on one by one */
.sa-sw3{display:flex;justify-content:space-between;align-items:center;gap:2cqi;padding:2.4cqi 2.6cqi;border-radius:2.4cqi;background:#f5f5f7;font:500 3.1cqi/1.2 var(--body);color:#1d1d1f}
.sa-sw3 i{position:relative;flex:none;width:9cqi;height:5cqi;border-radius:9cqi;background:#d2d2d7;animation:sa-sw-bg 7s ease infinite}
.sa-sw3 i::after{content:"";position:absolute;left:.6cqi;top:.6cqi;width:3.8cqi;height:3.8cqi;border-radius:50%;background:#fff;box-shadow:0 .4cqi 1cqi rgba(0,0,0,.25);animation:sa-sw-knob 7s ease infinite}
.sa-sw3:nth-of-type(3) i,.sa-sw3:nth-of-type(3) i::after{animation-delay:.6s}.sa-sw3:nth-of-type(4) i,.sa-sw3:nth-of-type(4) i::after{animation-delay:1.2s}
@keyframes sa-sw-bg{0%,12%{background:#d2d2d7}20%,90%{background:#1d1d1f}100%{background:#d2d2d7}}
@keyframes sa-sw-knob{0%,12%{transform:none}20%,90%{transform:translateX(4cqi)}100%{transform:none}}

/* A/B: the winning ad is highlighted, cost per contact falls */
.sa-ab__row{display:grid;grid-template-columns:1fr 1fr;gap:2.6cqi}
.sa-ab__row>div{display:grid;gap:1.4cqi;padding:2cqi;border-radius:2.4cqi;background:#f5f5f7;font:500 2.8cqi/1.2 var(--body);color:#1d1d1f}
.sa-ab__row .mk-ph{height:12cqi;border-radius:1.6cqi}
.sa-ab__row em{font:700 3.4cqi/1 var(--body);font-style:normal;color:#6e6e73}
.sa-ab__row .win{animation:sa-win 7s ease infinite}
.sa-ab__row .win em{color:#2F6B3A}
@keyframes sa-win{0%,30%{box-shadow:none}40%,90%{box-shadow:0 0 0 .6cqi #B49A45}100%{box-shadow:none}}
.sa-ab small{font:600 2.6cqi/1 var(--body);color:#6e6e73}
.sa-ab .sa-chart path{stroke:#B49A45}

/* monthly report + next steps */
.sa-tpr .sa-kpi small{display:block;font:600 2.5cqi/1.2 var(--body);color:#86868b;margin-bottom:1cqi}
.flow__art .sa-tpr .sa-kpi .mk-t{font-size:5.2cqi}
.sa-tpr .sa-bars{height:16cqi}
.sa-next{display:flex;align-items:center;gap:2.4cqi;font:600 3cqi/1 var(--body);color:#1d1d1f}
.sa-next i{width:4.4cqi;height:4.4cqi;border-radius:50%;background:linear-gradient(135deg,#EFE2B4,#A08B34);animation:mk-pulse 2.4s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){.sa-fn i{transform:none;opacity:1}.sa-stage i{background:#1d1d1f;color:#fff}.sa-sw3 i{background:#1d1d1f}.sa-sw3 i::after{transform:translateX(4cqi)}}

/* Manutenção, Blindagem e Bio site: artes SVG do "Como funciona" (build/mocks/steps-sites2.mjs) */
.flow__art[class*="sa-sx-"]{padding:0;display:block}

/* ───────── step illustrations: scenes matched to each step title (manual, files, calendar, report…) ───────── */
.flow__art.is-dark{background:linear-gradient(160deg,#fff,#ececf0)}
.flow__art .mk-t{color:#1d1d1f}
.sa-book{position:relative;width:78%;aspect-ratio:1.45;display:grid;grid-template-columns:1fr 1fr;border-radius:4cqi;overflow:hidden;box-shadow:0 10cqi 18cqi -8cqi rgba(0,0,0,.35);animation:mk-float 6s ease-in-out infinite}
.sa-book__cover{background:#1d1d1f;padding:6cqi 5cqi;display:flex;flex-direction:column;gap:3cqi;justify-content:flex-end}
.flow__art .sa-book__cover .mk-t{color:#fff;font-size:5cqi;line-height:1.05}
.sa-mark{width:10cqi;height:10cqi;border-radius:50%;background:linear-gradient(135deg,#EFE2B4,#A08B34);margin-bottom:auto}
.sa-book__page{background:#fff;padding:5cqi;display:flex;flex-direction:column;gap:2cqi;border-left:1px solid #e8e8ed}
.sa-book__page small{font:600 2.6cqi/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#86868b}
.sa-sw2{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4cqi}
.sa-sw2 i{aspect-ratio:1;border-radius:1.4cqi}
.sa-sw2 i:nth-child(1){background:#1d1d1f}.sa-sw2 i:nth-child(2){background:#A08B34}.sa-sw2 i:nth-child(3){background:#D9C78E}.sa-sw2 i:nth-child(4){background:#e8e8ed}
.flow__art .sa-aa2{font-size:11cqi;line-height:1}
.sa-tags{position:absolute;left:11%;bottom:9%;display:flex;gap:2cqi}
.sa-tags span{padding:2cqi 3cqi;border-radius:2cqi;background:#fff;font:700 3cqi/1 var(--body);color:#1d1d1f;box-shadow:0 3cqi 6cqi -3cqi rgba(0,0,0,.3);animation:mk-in 6s ease infinite both}
.sa-tags span:nth-child(2){animation-delay:.25s}.sa-tags span:nth-child(3){animation-delay:.5s}.sa-tags span:nth-child(4){animation-delay:.75s}
.sa-file{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:3cqi;padding:3cqi;border-radius:3cqi;background:#f5f5f7}
.sa-file i{font:700 2.8cqi/1 var(--body);font-style:normal;color:#fff;background:#1d1d1f;padding:2cqi 2.4cqi;border-radius:1.6cqi}
.sa-file span{font:500 3.4cqi/1.2 var(--body);color:#1d1d1f}
.sa-file b{width:5cqi;height:5cqi;border-radius:50%;background:linear-gradient(135deg,#EFE2B4,#A08B34);position:relative}
.sa-file b::after{content:"";position:absolute;left:50%;top:28%;width:1.6cqi;height:1.6cqi;border:solid #1d1d1f;border-width:0 .5cqi .5cqi 0;transform:translateX(-50%) rotate(45deg)}
.sa-stack{position:relative;width:74%;aspect-ratio:.82}
.sa-stack .sa-paper{position:absolute;inset:0;width:auto;animation:none}
.sa-stack .sa-paper:nth-child(1){transform:rotate(-7deg) translate(-4%,3%);opacity:.6}
.sa-stack .sa-paper:nth-child(2){transform:rotate(4deg) translate(3%,1%);opacity:.8}
.sa-stack .sa-paper:nth-child(3){animation:mk-float 6s ease-in-out infinite}
.sa-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1.6cqi}
.sa-cal i{aspect-ratio:1;border-radius:1.4cqi;background:#f5f5f7}
.sa-cal i.on{background:linear-gradient(135deg,#EFE2B4,#A08B34)}
.sa-cal i.now{background:#1d1d1f;animation:mk-pulse 2s infinite}
.sa-kpi{display:grid;grid-template-columns:1fr 1fr;gap:3cqi}
.sa-kpi div{display:grid;gap:2cqi;padding:3.4cqi;border-radius:3cqi;background:#f5f5f7}
.sa-bars{display:flex;align-items:flex-end;gap:2.4cqi;height:24cqi;padding-top:2cqi}
.sa-bars i{flex:1;border-radius:1.4cqi 1.4cqi 0 0;background:#d2d2d7;transform-origin:50% 100%;animation:sa-rise 4s ease-in-out infinite}
.sa-bars i:last-child{background:linear-gradient(180deg,#D9C78E,#A08B34)}
@keyframes sa-rise{0%{transform:scaleY(.2)}35%,85%{transform:scaleY(1)}100%{transform:scaleY(.2)}}
.sa-check{display:flex;align-items:center;gap:3cqi}
.sa-check i{flex:none;width:5cqi;height:5cqi;border-radius:50%;background:#1d1d1f;position:relative}
.sa-check.ok i::after{content:"";position:absolute;left:50%;top:22%;width:1.4cqi;height:2.4cqi;border:solid #fff;border-width:0 .5cqi .5cqi 0;transform:translateX(-50%) rotate(45deg)}
.sa-check.warn i{background:linear-gradient(135deg,#EFE2B4,#A08B34)}
.sa-check.warn i::after{content:"";position:absolute;left:50%;top:25%;width:.6cqi;height:2.6cqi;margin-left:-.3cqi;background:#1d1d1f;border-radius:1cqi}
.sa-paper .sa-bar{margin:2cqi 0 0}
.sa-drop{display:flex;flex-direction:column;align-items:center;gap:2.4cqi;padding:6cqi 3cqi;border:.5cqi dashed #c7c7cc;border-radius:3.4cqi;font:500 3.4cqi/1 var(--body);color:#6e6e73}
.sa-drop svg{width:9cqi;height:9cqi;color:#1d1d1f;animation:mk-float 3s ease-in-out infinite}
.sa-flow{position:relative;display:flex;flex-direction:column;align-items:center;width:62%}
.sa-flow span{width:100%;padding:4.4cqi;border-radius:3.4cqi;background:#fff;text-align:center;font:600 3.8cqi/1 var(--body);color:#1d1d1f;box-shadow:0 4cqi 10cqi -6cqi rgba(0,0,0,.35)}
.sa-flow span.on{background:#1d1d1f;color:#fff}
.sa-flow i{width:.6cqi;height:9cqi;background:#d2d2d7}
.sa-flow .sa-dot{position:absolute;left:50%;top:0;width:3.4cqi;height:3.4cqi;margin-left:-1.7cqi;border-radius:50%;background:linear-gradient(135deg,#EFE2B4,#A08B34);animation:sa-travel 3.2s ease-in-out infinite}
@keyframes sa-travel{0%{top:6%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:92%;opacity:0}}
.sa-player{position:relative;aspect-ratio:16/9;border-radius:3cqi;background:linear-gradient(135deg,#2c2c2e,#1d1d1f);display:grid;place-items:center}
.sa-player span{width:9cqi;height:9cqi;border-radius:50%;background:#fff;position:relative;animation:mk-pulse 2.4s infinite}
.sa-player span::after{content:"";position:absolute;left:38%;top:30%;border-left:3cqi solid #1d1d1f;border-top:2cqi solid transparent;border-bottom:2cqi solid transparent}
.sa-lesson{display:flex;align-items:center;gap:2.4cqi;font:500 3.3cqi/1.2 var(--body);color:#6e6e73}
.sa-lesson i{width:3.4cqi;height:3.4cqi;border-radius:50%;border:.5cqi solid #d2d2d7}
.sa-lesson.on{color:#1d1d1f}
.sa-lesson.on i{border-color:#A08B34;background:#A08B34}
.sa-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqi;width:84%}
.sa-opts>div{position:relative;display:grid;gap:2cqi;padding:3cqi;border-radius:3.4cqi;background:#fff;box-shadow:0 4cqi 10cqi -7cqi rgba(0,0,0,.35)}
.sa-opts>div .mk-ph{aspect-ratio:1}
.sa-opts>div.on{outline:.6cqi solid #1d1d1f;animation:mk-float 5s ease-in-out infinite}
.sa-opts em{position:absolute;right:-2cqi;top:-2cqi;width:6cqi;height:6cqi;border-radius:50%;background:#1d1d1f}
.sa-opts em::after{content:"";position:absolute;left:50%;top:24%;width:1.4cqi;height:2.6cqi;border:solid #fff;border-width:0 .5cqi .5cqi 0;transform:translateX(-50%) rotate(45deg)}
.sa-restore{position:relative;width:74%;aspect-ratio:.85;border-radius:4cqi;overflow:hidden;box-shadow:0 10cqi 18cqi -8cqi rgba(0,0,0,.35)}
.sa-restore .old,.sa-restore .new{position:absolute;inset:0}
.sa-restore .new{background:radial-gradient(40% 32% at 50% 38%,#2c2c2e 0 60%,transparent 61%),radial-gradient(70% 40% at 50% 100%,#2c2c2e 0 70%,transparent 71%),linear-gradient(160deg,#ececf0,#d2d2d7)}
.sa-restore .old{background:radial-gradient(40% 32% at 50% 38%,#6b5a3c 0 60%,transparent 61%),radial-gradient(70% 40% at 50% 100%,#6b5a3c 0 70%,transparent 71%),linear-gradient(160deg,#d9c79e,#b59a68);filter:contrast(.8);clip-path:inset(0 50% 0 0);animation:sa-wipe 5s ease-in-out infinite}
.sa-restore .old::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 9px,rgba(255,255,255,.35) 9px 10px)}
.sa-restore i{position:absolute;top:0;bottom:0;left:50%;width:.6cqi;background:#fff;animation:sa-wipe-line 5s ease-in-out infinite}
.sa-restore span{position:absolute;top:4cqi;padding:1.6cqi 2.6cqi;border-radius:9cqi;background:rgba(255,255,255,.9);font:700 2.6cqi/1 var(--body);color:#1d1d1f}
.sa-restore .a{left:4cqi}.sa-restore .b{right:4cqi}
@keyframes sa-wipe{0%,100%{clip-path:inset(0 70% 0 0)}50%{clip-path:inset(0 30% 0 0)}}
@keyframes sa-wipe-line{0%,100%{left:30%}50%{left:70%}}
.sa-gen{display:grid;grid-template-columns:1fr 1fr;gap:3cqi;width:70%}
.sa-gen div{aspect-ratio:.8;border-radius:3cqi;background:radial-gradient(34% 26% at 50% 36%,#3a3a3c 0 60%,transparent 61%),radial-gradient(64% 36% at 50% 100%,#3a3a3c 0 70%,transparent 71%),linear-gradient(160deg,#ececf0,#d2d2d7);animation:mk-in 6s ease infinite both}
.sa-gen div:nth-child(2){filter:sepia(.4);animation-delay:.3s}
.sa-gen div:nth-child(3){filter:sepia(.7);animation-delay:.6s}
.sa-gen div:nth-child(4){filter:grayscale(1) contrast(1.2);animation-delay:.9s}
.sa-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqi}
.sa-frames div{position:relative;aspect-ratio:1.2;border-radius:2.4cqi;border:.5cqi solid #d2d2d7;background:#f5f5f7}
.sa-frames div::after{content:"";position:absolute;left:20%;right:20%;top:40%;height:.5cqi;background:#c7c7cc;box-shadow:0 3cqi 0 #c7c7cc}
.sa-frames span{position:absolute;left:2cqi;top:1.6cqi;font:700 2.6cqi/1 var(--body);color:#86868b}
.sa-slide{position:relative;width:84%;aspect-ratio:16/10;border-radius:3.4cqi;background:#1d1d1f;padding:7cqi;display:flex;align-items:flex-end;box-shadow:0 10cqi 18cqi -8cqi rgba(0,0,0,.4);animation:mk-float 6s ease-in-out infinite}
.sa-slide>div{display:grid;gap:2.4cqi;width:100%}
.flow__art .sa-slide .mk-t{color:#fff;font-size:7cqi}
.sa-slide .mk-l{background:rgba(255,255,255,.25)}
.sa-slide .mk-l.g{background:linear-gradient(90deg,#EFE2B4,#A08B34)}
.sa-dots{position:absolute;right:5cqi;top:5cqi;display:flex;gap:1.4cqi}
.sa-dots i{width:1.8cqi;height:1.8cqi;border-radius:50%;background:rgba(255,255,255,.3)}
.sa-dots i.on{background:#fff}
.sa-tl{position:relative;display:flex;gap:1.4cqi;height:5cqi}
.sa-tl i{flex:1;border-radius:1.2cqi;background:#d2d2d7}
.sa-tl i:nth-child(2){flex:2;background:linear-gradient(90deg,#D9C78E,#A08B34)}
.sa-tl.t2 i{background:#e8e8ed}
.sa-tl b{position:absolute;top:-2cqi;bottom:-2cqi;width:.6cqi;background:#1d1d1f;animation:sa-play 4s linear infinite}
@keyframes sa-play{from{left:0}to{left:100%}}
.sa-cam{position:relative;width:80%;aspect-ratio:1.4;border-radius:4cqi;background:radial-gradient(30% 34% at 52% 46%,#D9C78E 0 40%,transparent 41%),linear-gradient(160deg,#3a3a3c,#1d1d1f);box-shadow:0 10cqi 18cqi -8cqi rgba(0,0,0,.4)}
.sa-cam .rec{position:absolute;left:5cqi;top:5cqi;display:flex;align-items:center;gap:1.6cqi;font:700 2.8cqi/1 var(--body);color:#fff}
.sa-cam .rec::before{content:"";width:2.4cqi;height:2.4cqi;border-radius:50%;background:#ff3b30;animation:mk-pulse 1.2s infinite}
.sa-cam>i{position:absolute;width:7cqi;height:7cqi;border:solid rgba(255,255,255,.8);border-width:0}
.sa-cam .tl{left:4cqi;top:13cqi;border-width:.5cqi 0 0 .5cqi}.sa-cam .tr{right:4cqi;top:4cqi;border-width:.5cqi .5cqi 0 0}
.sa-cam .bl{left:4cqi;bottom:4cqi;border-width:0 0 .5cqi .5cqi}.sa-cam .br{right:4cqi;bottom:4cqi;border-width:0 .5cqi .5cqi 0}
.sa-cam b{position:absolute;left:41%;top:34%;width:18%;height:24%;border:.5cqi solid #D9C78E;border-radius:1cqi;animation:sa-focus 3s ease-in-out infinite}
@keyframes sa-focus{0%,100%{transform:scale(1.25);opacity:.4}40%,80%{transform:scale(1);opacity:1}}
/* publish: review checklist ticks, the provisional link becomes the domain, then "no ar" */
.sa-pub .mk-win__bar span.sa-url{position:relative;height:5cqi;font:600 2.8cqi/5cqi var(--body);padding-left:3cqi}
.sa-url em{position:absolute;inset:0 0 0 3cqi;font-style:normal;display:flex;align-items:center;gap:1.4cqi;animation:sa-url-a 7s ease infinite}
.sa-url em.is-final{color:#1d1d1f;animation-name:sa-url-b}
.sa-url svg{width:2.8cqi;height:2.8cqi;fill:none;stroke:#3E9150;stroke-width:2.4}
.sa-pub .sa-code .mk-l{animation:none}
.sa-rv{display:flex;align-items:center;gap:3cqi;font:500 3.6cqi/1.2 var(--body);color:#1d1d1f}
.sa-rv i{flex:none;width:5cqi;height:5cqi;border-radius:50%;border:.5cqi solid #d2d2d7;position:relative;animation:sa-rv-on 7s ease infinite}
.sa-rv i::after{content:"";position:absolute;left:50%;top:18%;width:1.3cqi;height:2.3cqi;border:solid #fff;border-width:0 .5cqi .5cqi 0;transform:translateX(-50%) rotate(45deg);opacity:0;animation:sa-rv-tick 7s ease infinite}
.sa-rv:nth-child(2) i,.sa-rv:nth-child(2) i::after{animation-delay:.5s}
.sa-rv:nth-child(3) i,.sa-rv:nth-child(3) i::after{animation-delay:1s}
.flow__art .sa-go{display:inline-block;justify-self:start;margin-top:1cqi;background:#1d1d1f;color:#fff;animation:sa-go 7s ease infinite}
.flow__art .sa-pub-chip{animation:sa-pub-chip 7s ease infinite}
@keyframes sa-rv-on{0%,12%{background:transparent;border-color:#d2d2d7}20%,90%{background:#1d1d1f;border-color:#1d1d1f}100%{background:transparent;border-color:#d2d2d7}}
@keyframes sa-rv-tick{0%,14%{opacity:0}22%,90%{opacity:1}100%{opacity:0}}
@keyframes sa-go{0%,40%{transform:none;background-color:#1d1d1f;color:#fff}44%{transform:scale(.94);background-color:#1d1d1f;color:#fff}50%,90%{transform:none;background-color:#C2AE66;color:#1d1d1f}100%{background-color:#1d1d1f;color:#fff}}
@keyframes sa-url-a{0%,48%{opacity:1;transform:none}56%,92%{opacity:0;transform:translateY(-60%)}100%{opacity:1;transform:none}}
@keyframes sa-url-b{0%,48%{opacity:0;transform:translateY(60%)}56%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(60%)}}
@keyframes sa-pub-chip{0%,52%{opacity:0;transform:translateY(3cqi)}60%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(3cqi)}}
@media (prefers-reduced-motion:reduce){.sa-rv i{background:#1d1d1f;border-color:#1d1d1f}.sa-rv i::after{opacity:1}.sa-url em{opacity:0}.sa-url em.is-final,.flow__art .sa-pub-chip{opacity:1;transform:none}}
/* order: a real test purchase is checked step by step, then the store opens */
.sa-order{gap:3.2cqi}
.sa-ord-head{display:flex;align-items:center;gap:3.4cqi;padding-bottom:3.4cqi;border-bottom:1px solid #e8e8ed}
.sa-ord-head .mk-ph{flex:none;width:13cqi;height:13cqi;border-radius:2.6cqi}
.sa-ord-head small{display:block;font:600 2.8cqi/1.2 var(--body);color:#86868b;margin-bottom:1cqi}
.flow__art .sa-ord-head .mk-t{font-size:5.4cqi}
.sa-order .sa-rv{font-size:3.3cqi}

/* Carrossel "Como funciona": moldura única das artes + movimento das cenas SVG de build/flow-lib.mjs.
   Este arquivo vem por último em mocks.css; os seletores com .flow .flow__art[class] vencem as regras antigas por tipo de cena (sa-*). */

/* moldura fixa: mesma largura e proporção 4:4.6 em todas as etapas, cena centralizada e sem cortar */
.flow .flow__art[class]{width:100%;height:auto;min-width:0;aspect-ratio:4/4.6;padding:0;margin:0;display:grid;place-items:center;overflow:hidden;align-self:start;box-sizing:border-box;border:0;box-shadow:none;transform:none;animation:none;filter:none}
/* título/descrição: o bloco "nw" (palavras coladas) quebra por dentro se não couber na linha, em vez de sair do card */
.flow__slide :is(h3,p) .nw{display:inline-block!important;max-width:100%;white-space:normal!important}
.flow .flow__art[class] > .zf,.flow .flow__art[class] > .fp-art{display:block;width:100%;height:100%}
.zf{font-family:var(--body,Inter,system-ui,sans-serif)}
/* a caixa de referência da transformação só muda nos elementos animados (zf-*); ico() e badge() usam transform no atributo e precisam da origem normal do SVG */
.zf-float,.zf-in,.zf-grow,.zf-growy,.zf-pulse,.zf-pop,.zf-draw,.zf-slide,.zf-rise,.zf-tick,.zf-ping,.zf-spin,.zf-blink{transform-box:fill-box}

@keyframes zf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes zf-in{0%{opacity:0;transform:translateY(7px)}9%,88%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-2px)}}
@keyframes zf-grow{0%{transform:scaleX(.05)}55%,100%{transform:scaleX(1)}}
@keyframes zf-growy{0%{transform:scaleY(.06)}55%,100%{transform:scaleY(1)}}
@keyframes zf-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
@keyframes zf-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes zf-draw{0%{stroke-dashoffset:1}50%,100%{stroke-dashoffset:0}}
@keyframes zf-slide{0%,100%{transform:translateX(0)}50%{transform:translateX(var(--dx,12px))}}
@keyframes zf-rise{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--dy,-8px))}}
@keyframes zf-tick{0%,8%{transform:scale(.2);opacity:0}22%,100%{transform:scale(1);opacity:1}}
@keyframes zf-ping{0%{transform:scale(.7);opacity:.5}100%{transform:scale(1.7);opacity:0}}
@keyframes zf-spin{to{transform:rotate(360deg)}}
@keyframes zf-blink{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}

/* só anima quando o carrossel está visível (.is-live, via site.js) e o visitante não pediu menos movimento */
@media (prefers-reduced-motion:no-preference){
  .flow.is-live .zf-float{animation:zf-float 6s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:center}
  .flow.is-live .zf-in{animation:zf-in 9s ease infinite both;animation-delay:var(--d,0s)}
  .flow.is-live .zf-grow{animation:zf-grow 6s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:0 50%}
  .flow.is-live .zf-growy{animation:zf-growy 6s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:50% 100%}
  .flow.is-live .zf-pulse{animation:zf-pulse 2.4s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:center}
  .flow.is-live .zf-pop{animation:zf-pop 4.2s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:center}
  .flow.is-live .zf-draw{stroke-dasharray:1;animation:zf-draw 6s ease-in-out infinite;animation-delay:var(--d,0s)}
  .flow.is-live .zf-slide{animation:zf-slide 5s ease-in-out infinite;animation-delay:var(--d,0s)}
  .flow.is-live .zf-rise{animation:zf-rise 4.4s ease-in-out infinite;animation-delay:var(--d,0s)}
  .flow.is-live .zf-tick{animation:zf-tick 7s ease-out infinite both;animation-delay:var(--d,0s);transform-origin:center}
  .flow.is-live .zf-ping{animation:zf-ping 2.8s ease-out infinite;animation-delay:var(--d,0s);transform-origin:center}
  .flow.is-live .zf-spin{animation:zf-spin 9s linear infinite;transform-origin:center}
  .flow.is-live .zf-blink{animation:zf-blink 1.2s steps(1) infinite}
}

/* a etapa fora de foco não encolhe a arte: todas as artes mantêm exatamente a mesma altura visível */
.motion .flow__slide:not(.is-active) .flow__art{transform:none}