/* Digipek — digipek.com */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/outfit-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/outfit-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/outfit-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/outfit-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-italic.woff2) format('woff2')}
body{margin:0;background:#000}
*{box-sizing:border-box}
a{color:#F2EFEA;text-decoration:none}
::selection{background:#FF6A00;color:#000}
.wrap{max-width:1320px;margin:0 auto;padding-left:48px;padding-right:48px}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:14px;color:#8C8780}
.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:#FF6A00;box-shadow:0 0 10px rgba(255,106,0,.7)}
.serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-0.01em}
.h2{margin:0;font-size:80px;font-weight:400;letter-spacing:-0.045em;line-height:1}
.dgnoise{background:url(../img/noise.png) repeat}
.ar{width:.78em;height:.78em;display:inline-block;vertical-align:-.04em}
/* ---------- botões ---------- */
.btn-p{position:relative;display:inline-flex;align-items:center;gap:14px;height:58px;padding:0 8px 0 28px;border-radius:999px;background:#F2EFEA;color:#0B0B0B;font-size:16px;font-weight:500;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.btn-p .ic{position:relative;width:42px;height:42px;border-radius:50%;background:#0B0B0B;color:#F2EFEA;display:flex;align-items:center;justify-content:center;overflow:hidden}
.btn-p .ic svg{width:14px;height:14px;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.btn-p .ic svg+svg{position:absolute;transform:translate(-26px,26px)}
.btn-p:hover{box-shadow:0 10px 40px rgba(255,106,0,.25)}
.btn-p:hover .ic svg:first-child{transform:translate(26px,-26px)}
.btn-p:hover .ic svg+svg{transform:none}
.btn-p .ic{transition:background .5s}
.btn-p:hover .ic{background:#FF6A00;color:#0B0B0B}
.btn-g{position:relative;display:inline-flex;align-items:center;height:58px;padding:0 4px;font-size:16px;font-weight:500;color:#F2EFEA}
.btn-g:after{content:"";position:absolute;left:4px;right:4px;bottom:14px;height:1px;background:rgba(242,239,234,.35);transform-origin:right;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.btn-g:before{content:"";position:absolute;left:4px;right:4px;bottom:14px;height:1px;background:#FF7A1A;transform:scaleX(0);transform-origin:left;transition:transform .6s .1s cubic-bezier(.2,.7,.2,1);z-index:1}
.btn-g:hover:before{transform:scaleX(1)}
.chip-glass{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);font-size:14px;font-weight:500;color:#F2EFEA;transition:background .4s,border-color .4s}
.chip-glass:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.live{width:7px;height:7px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:live 2.4s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%,100%{box-shadow:0 0 0 9px rgba(61,220,132,0)}}
/* ---------- projetos ---------- */
.projs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 24px}
.proj{display:block;cursor:none}
.proj.wide{grid-column:span 2}
.proj .img{position:relative;border-radius:24px;overflow:hidden;background:#111;aspect-ratio:4/3}
.proj.wide .img{aspect-ratio:16/9}.proj.wide .img img{object-position:50% 42%}
.proj .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter 1s}



.proj .meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:22px}
.proj h3{margin:0;font-size:30px;font-weight:400;letter-spacing:-0.03em}
.proj .tags{font-size:16px;color:#8C8780;margin-top:6px}
.proj .yr{font-size:14px;color:#5C5853;white-space:nowrap}
.follow{position:fixed;left:0;top:0;z-index:50;pointer-events:none;display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:#F2EFEA;color:#0B0B0B;font-size:14px;font-weight:500;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1);white-space:nowrap}
.follow.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* ---------- canvas de design (assinatura) ---------- */
.fig{position:relative;border-radius:22px;overflow:hidden;background:#0E0E0E;border:1px solid rgba(255,255,255,.08);box-shadow:0 60px 120px rgba(0,0,0,.6);font-size:12px;color:#B8B2AA}
.fig-top{display:flex;align-items:center;gap:14px;height:44px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.07);background:#141414}
.fig-top .file{color:#8C8780}.fig-top .file b{color:#F2EFEA;font-weight:500}
.fig-top .tools{display:flex;gap:6px;margin-left:12px}
.fig-top .tools i{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#8C8780}
.fig-top .tools i.on{background:#FF6A00;color:#0B0B0B}
.fig-top .avs{margin-left:auto;display:flex;align-items:center;gap:8px}
.av2{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#0B0B0B}
.fig-body{display:grid;grid-template-columns:210px 1fr 240px;height:560px}
.fig-l,.fig-r{background:#121212;padding:14px 0;overflow:hidden}
.fig-l{border-right:1px solid rgba(255,255,255,.06)}
.fig-r{border-left:1px solid rgba(255,255,255,.06)}
.fig .ph{padding:0 16px 10px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#5C5853}
.lay{display:flex;align-items:center;gap:8px;height:30px;padding:0 16px;color:#9A958E;white-space:nowrap}
.lay svg{width:12px;height:12px;flex:0 0 12px;opacity:.7}
.lay.in1{padding-left:30px}.lay.in2{padding-left:44px}
.lay.sel-t{animation:selT 12s infinite}.lay.sel-b{animation:selB 12s infinite}.lay.sel-c{animation:selC 12s infinite}
@keyframes selT{0%,10%{background:transparent;color:#9A958E}14%,38%{background:rgba(255,106,0,.14);color:#FFB27A}42%,100%{background:transparent;color:#9A958E}}
@keyframes selB{0%,44%{background:transparent;color:#9A958E}48%,70%{background:rgba(255,106,0,.14);color:#FFB27A}74%,100%{background:transparent;color:#9A958E}}
@keyframes selC{0%,76%{background:transparent;color:#9A958E}80%,96%{background:rgba(255,106,0,.14);color:#FFB27A}100%{background:transparent;color:#9A958E}}
.fig-c{position:relative;background:#1A1A1A;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:18px 18px;overflow:hidden}
.board{position:absolute;left:50%;top:50%;width:560px;height:400px;margin:-210px 0 0 -280px}
.board-in{position:absolute;inset:0;border-radius:6px;background:#050505;box-shadow:0 20px 50px rgba(0,0,0,.5);overflow:hidden}
.board-lbl{position:absolute;left:50%;top:50%;margin:-232px 0 0 -280px;font-size:11px;color:#8C8780}
.bd-nav{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;font-size:10px;color:#8C8780}
.bd-glow{position:absolute;inset:0;background:radial-gradient(50% 40% at 25% 60%,rgba(255,106,0,.25),transparent 70%),radial-gradient(40% 40% at 85% 40%,rgba(140,50,10,.3),transparent 70%)}
.bd-t{position:absolute;left:40px;top:96px;width:400px;font-size:40px;line-height:1.02;letter-spacing:-0.04em;color:#F2EFEA}
.bd-s{position:absolute;left:40px;top:214px;width:300px;font-size:12px;line-height:1.5;color:#8C8780}
.bd-b{position:absolute;left:40px;top:276px;height:38px;padding:0 6px 0 18px;border-radius:999px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;color:#0B0B0B;animation:btnColor 12s infinite}
.bd-b i{width:28px;height:28px;border-radius:50%;background:#0B0B0B}
@keyframes btnColor{0%,58%{background:#F2EFEA}62%,100%{background:#FF7A1A}}
.bd-cards{position:absolute;left:40px;right:40px;bottom:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bd-cards div{height:44px;border-radius:8px;background:#121212;border:1px solid rgba(255,255,255,.06)}
/* seleções (estilo ferramenta de design) */
.selbox{position:absolute;border:1.5px solid #FF6A00;pointer-events:none;opacity:0}
.selbox i{position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid #FF6A00}
.selbox i:nth-child(1){left:-4px;top:-4px}.selbox i:nth-child(2){right:-4px;top:-4px}.selbox i:nth-child(3){left:-4px;bottom:-4px}.selbox i:nth-child(4){right:-4px;bottom:-4px}
.selbox b{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);font-weight:500;font-size:10px;color:#0B0B0B;background:#FF6A00;border-radius:4px;padding:2px 6px;white-space:nowrap}
.sel1{left:36px;top:92px;width:410px;height:90px;animation:sel1 12s infinite}
.sel2{left:36px;top:272px;width:158px;height:46px;animation:sel2 12s infinite}
.sel3{left:36px;right:36px;bottom:22px;height:52px;animation:sel3 12s infinite}
@keyframes sel1{0%,12%{opacity:0}15%,38%{opacity:1}41%,100%{opacity:0}}
@keyframes sel2{0%,46%{opacity:0}49%,70%{opacity:1}73%,100%{opacity:0}}
@keyframes sel3{0%,78%{opacity:0}81%,96%{opacity:1}99%,100%{opacity:0}}
.red{position:absolute;pointer-events:none;opacity:0;animation:sel1 12s infinite}
.red.v{left:240px;top:184px;width:1px;height:28px;background:#FF3B6B}
.red.v b{position:absolute;left:6px;top:7px;font-size:10px;font-weight:600;color:#FF3B6B}
.red.v2{left:110px;top:226px;width:1px;height:48px;background:#FF3B6B;animation:sel2 12s infinite}
.red.v2 b{position:absolute;left:6px;top:16px;font-size:10px;font-weight:600;color:#FF3B6B}
.fcur{position:absolute;left:0;top:0;z-index:5;pointer-events:none;animation:fcur 12s cubic-bezier(.65,0,.35,1) infinite}
.fcur span{position:absolute;left:14px;top:-20px;background:#FF6A00;color:#0B0B0B;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px 6px 6px 2px;white-space:nowrap}
@keyframes fcur{0%,4%{transform:translate(600px,430px)}12%,36%{transform:translate(250px,150px)}46%,68%{transform:translate(120px,300px)}78%,94%{transform:translate(330px,372px)}100%{transform:translate(600px,430px)}}
.prop{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05)}
.prop .k{font-size:11px;color:#5C5853;margin-bottom:8px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fld{height:28px;border-radius:6px;background:#1A1A1A;display:flex;align-items:center;padding:0 10px;color:#D9D4CC;font-size:12px;position:relative;overflow:hidden}
.fld .sw{width:12px;height:12px;border-radius:3px;margin-right:8px}
.swap{position:relative;height:16px;flex:1}
.swap span{position:absolute;inset:0;opacity:0}
.swap .s1{animation:sw1 12s infinite}.swap .s2{animation:sw2 12s infinite}.swap .s3{animation:sw3 12s infinite}.swap .s0{animation:sw0 12s infinite}
@keyframes sw0{0%,13%{opacity:1}14%,100%{opacity:0}}
@keyframes sw1{0%,13%{opacity:0}14%,46%{opacity:1}47%,100%{opacity:0}}
@keyframes sw2{0%,46%{opacity:0}47%,79%{opacity:1}80%,100%{opacity:0}}
@keyframes sw3{0%,79%{opacity:0}80%,99%{opacity:1}100%{opacity:0}}
.sw-anim{animation:swc 12s infinite}
@keyframes swc{0%,58%{background:#F2EFEA}62%,100%{background:#FF7A1A}}
.fig-note{position:absolute;right:22px;bottom:20px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:#F7E7A1;color:#3A3204;font-size:12px;box-shadow:0 10px 30px rgba(0,0,0,.4);transform:rotate(2deg);animation:noteIn 12s infinite}
@keyframes noteIn{0%,82%{opacity:0;transform:translateY(8px) rotate(2deg)}86%,97%{opacity:1;transform:rotate(2deg)}100%{opacity:0}}
/* ---------- arte do sobre ---------- */
.artcard{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:#070707;display:flex;align-items:center;justify-content:center}
.art-glow{position:absolute;inset:-20%;background:radial-gradient(40% 35% at 50% 48%,rgba(255,106,0,.28),transparent 70%),radial-gradient(60% 50% at 30% 80%,rgba(120,40,8,.25),transparent 70%);animation:artbreath 9s ease-in-out infinite}
@keyframes artbreath{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
.art-d{position:relative;width:42%;height:auto;filter:drop-shadow(0 30px 60px rgba(255,106,0,.25));animation:dfloat 12s ease-in-out infinite}
@keyframes dfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(-2deg)}}
.art-tag{position:absolute;left:24px;right:24px;bottom:24px;display:flex;justify-content:space-between;font-size:14px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:40px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.facts div{background:#060606;padding:22px 20px}
.facts b{display:block;font-size:22px;font-weight:400;letter-spacing:-0.02em;color:#F2EFEA}
.facts span{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:#8C8780}
/* ---------- contato ---------- */
.dmark{position:absolute;right:-60px;bottom:-90px;width:520px;height:auto;opacity:.07;pointer-events:none;animation:dfloat 14s ease-in-out infinite}
/* ---------- modo designer ---------- */
.dm-toggle{position:fixed;left:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 16px;border-radius:999px;background:rgba(14,14,14,.82);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);color:#F2EFEA;font:500 13px 'Outfit',sans-serif;cursor:pointer}
.dm-toggle .sw2{position:relative;width:36px;height:22px;border-radius:999px;background:#2A2826;transition:background .4s}
.dm-toggle .sw2:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#F2EFEA;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.dm .dm-toggle .sw2{background:#FF6A00}
.dm .dm-toggle .sw2:after{transform:translateX(14px)}
.gridov{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;transition:opacity .6s}
.gridov div{height:100%;max-width:1320px;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.gridov i{background:rgba(255,106,0,.055);border-left:1px solid rgba(255,106,0,.18);border-right:1px solid rgba(255,106,0,.18)}
.dm .gridov{opacity:1}
[data-spec]{position:relative}
.dm [data-spec]{outline:1px dashed rgba(255,106,0,.55);outline-offset:6px}
.dm [data-spec]:after{content:attr(data-spec);position:absolute;left:-6px;top:-30px;z-index:41;font:500 11px 'Outfit',sans-serif;letter-spacing:.02em;color:#0B0B0B;background:#FF6A00;padding:3px 7px;border-radius:4px;white-space:nowrap;pointer-events:none}
.coord{position:fixed;left:0;top:0;z-index:61;pointer-events:none;font:500 11px 'Outfit',sans-serif;color:#FF7A1A;background:rgba(10,10,10,.85);border:1px solid rgba(255,106,0,.4);border-radius:6px;padding:4px 7px;opacity:0;transition:opacity .3s}
.dm .coord{opacity:1}
.cross-x,.cross-y{position:fixed;z-index:39;pointer-events:none;background:rgba(255,106,0,.35);opacity:0;transition:opacity .3s}
.cross-x{left:0;right:0;height:1px;top:0}.cross-y{top:0;bottom:0;width:1px;left:0}
.dm .cross-x,.dm .cross-y{opacity:1}
@media (prefers-reduced-motion: reduce){.art-glow,.art-d,.dmark,.fcur,.selbox,.red,.fig-note,.live{animation:none!important}}
/* serviços: seletor + palco */
.sv-item{position:relative;display:grid;grid-template-columns:48px 1fr;gap:8px;width:100%;text-align:left;background:none;border:0;border-top:1px solid rgba(255,255,255,.08);padding:26px 0 28px;color:#F2EFEA;font-family:inherit;cursor:pointer}
.sv-item:last-of-type{border-bottom:1px solid rgba(255,255,255,.08)}
.sv-n{font-size:14px;color:#5C5853;padding-top:10px;transition:color .6s}
.sv-t{display:block;font-size:34px;letter-spacing:-0.03em;color:#5C5853;transition:color .6s cubic-bezier(.2,.7,.2,1)}
.sv-d{display:block;font-size:16px;line-height:1.55;color:#8C8780;max-height:0;opacity:0;overflow:hidden;transition:max-height .8s cubic-bezier(.2,.7,.2,1),opacity .6s,margin .8s}
.sv-item.on .sv-t{color:#F2EFEA}.sv-item.on .sv-n{color:#FF7A1A}
.sv-item.on .sv-d{max-height:60px;opacity:1;margin-top:8px}
.sv-item:not(.on):hover .sv-t{color:#9A958E}
.sv-bar{position:absolute;left:0;right:0;top:-1px;height:1px;overflow:hidden}
.sv-bar span{display:block;height:100%;width:0;background:#FF6A00}
@keyframes svfill{from{width:0}to{width:100%}}
.sv-item.on .sv-bar span{animation:svfill 7s linear forwards}
.sv-item.on.paused .sv-bar span{animation-play-state:paused}
.stage{position:relative;height:560px;border-radius:32px;overflow:hidden;background:radial-gradient(90% 70% at 85% 0%,#1F120A 0%,#0C0B0A 55%,#0A0A0A 100%);border:1px solid rgba(255,255,255,.07);--mx:60%;--my:30%}
.spot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(255,122,26,.14),transparent 70%)}
.layer{position:absolute;inset:0;opacity:0;filter:blur(10px);transform:scale(.985);transition:opacity .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.layer.on{opacity:1;filter:none;transform:none}
.win{position:absolute;left:40px;right:40px;top:44px;bottom:84px;border-radius:20px;background:#0F0E0D;border:1px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.win-bar{display:flex;align-items:center;gap:7px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.win-bar i{width:9px;height:9px;border-radius:50%;background:#2A2826}
.win-bar span{margin-left:12px;font-size:12px;color:#5C5853}
.cap{position:absolute;left:40px;bottom:32px;font-size:14px;color:#8C8780}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.layer .a1,.layer .a2,.layer .a3,.layer .a4,.layer .a5,.layer .toast{opacity:0}
.layer.on .a1{animation:rise .9s .25s cubic-bezier(.2,.7,.2,1) forwards}
.layer.on .a2{animation:rise .9s .45s cubic-bezier(.2,.7,.2,1) forwards}
.layer.on .a3{animation:rise .9s .65s cubic-bezier(.2,.7,.2,1) forwards}
.layer.on .a4{animation:rise .9s .9s cubic-bezier(.2,.7,.2,1) forwards}
.layer.on .a5{animation:rise .9s 1.15s cubic-bezier(.2,.7,.2,1) forwards}
.toast{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(10px);font-size:14px;color:#F2EFEA}
.toast b{font-weight:500}.toast small{color:#8C8780;font-size:13px}.toast em{margin-left:auto;font-style:normal;font-size:12px;color:#5C5853}
.av{flex:0 0 36px;height:36px;border-radius:50%;background:rgba(255,106,0,.16);color:#FFB27A;display:flex;align-items:center;justify-content:center;font-size:14px}
.layer.on .b3{animation:rise .9s .3s cubic-bezier(.2,.7,.2,1) forwards}
.layer.on .b2{animation:rise .9s 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.layer.on .b1{animation:rise .9s 1.9s cubic-bezier(.2,.7,.2,1) forwards}
.calc{position:relative;height:48px;font-size:36px;letter-spacing:-0.03em}
.calc span{position:absolute;inset:0}
@keyframes c1{0%,29%{opacity:1}33%,100%{opacity:0}}
@keyframes c2{0%,29%{opacity:0}33%,49%{opacity:1}53%,100%{opacity:0}}
@keyframes c3{0%,49%{opacity:0}53%,82%{opacity:1}86%,100%{opacity:0}}
.calc .v1{animation:c1 6s infinite}.calc .v2{animation:c2 6s infinite;opacity:0}.calc .v3{animation:c3 6s infinite;opacity:0;color:#FF7A1A}
/* processo */
.step{position:relative}
.dot{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#0E0D0C;border:1px solid rgba(255,255,255,.12);font-size:16px;color:#F2EFEA}
.st{font-size:26px;letter-spacing:-0.02em;margin-top:28px}
.step p{margin:10px 0 0;font-size:16px;line-height:1.6;color:#8C8780;max-width:260px}
@keyframes travel{0%{left:23px;opacity:0}5%,16%{left:23px;opacity:1}30%,40%{left:calc(25% + 28px)}54%,64%{left:calc(50% + 33px)}78%,92%{left:calc(75% + 38px);opacity:1}100%{left:calc(75% + 38px);opacity:0}}
.travel{position:absolute;top:22px;width:10px;height:10px;border-radius:50%;background:#FF6A00;box-shadow:0 0 18px 4px rgba(255,106,0,.5);animation:travel 18s cubic-bezier(.65,0,.35,1) infinite}
.step .dot{position:relative;z-index:2;transition:none}
@keyframes g1{0%,3%{border-color:rgba(255,255,255,.12);box-shadow:none;color:#F2EFEA}6%,15%{border-color:#FF6A00;box-shadow:0 0 0 6px rgba(255,106,0,.10),0 0 30px rgba(255,106,0,.35);color:#FFB27A}20%,100%{border-color:rgba(255,255,255,.12);box-shadow:none;color:#F2EFEA}}
@keyframes g2{0%,28%{border-color:rgba(255,255,255,.12);box-shadow:none;color:#F2EFEA}31%,39%{border-color:#FF6A00;box-shadow:0 0 0 6px rgba(255,106,0,.10),0 0 30px rgba(255,106,0,.35);color:#FFB27A}44%,100%{border-color:rgba(255,255,255,.12);box-shadow:none;color:#F2EFEA}}
@keyframes g3{0%,52%{border-color:rgba(255,255,255,.12);box-shadow:none;color:#F2EFEA}55%,63%{border-color:#FF6A00;box-shadow:0 0 0 6px rgba(255,106,0,.10),0 0 30px rgba(255,106,0,.35);color:#FFB27A}68%,100%{border-color:rgba(255,255,255,.12);box-shadow:none;color:#F2EFEA}}
@keyframes g4{0%,76%{border-color:rgba(255,255,255,.12);box-shadow:none;color:#F2EFEA}79%,92%{border-color:#FF6A00;box-shadow:0 0 0 6px rgba(255,106,0,.10),0 0 30px rgba(255,106,0,.35);color:#FFB27A}97%,100%{border-color:rgba(255,255,255,.12);box-shadow:none;color:#F2EFEA}}
.step:nth-child(1) .dot{animation:g1 18s ease-in-out infinite}
.step:nth-child(2) .dot{animation:g2 18s ease-in-out infinite}
.step:nth-child(3) .dot{animation:g3 18s ease-in-out infinite}
.step:nth-child(4) .dot{animation:g4 18s ease-in-out infinite}
.chip{display:inline-block;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 13px;font-size:13px;color:#B8B2AA}
.chip.on{background:rgba(255,106,0,.14);border-color:rgba(255,106,0,.5);color:#FFB27A}
@keyframes knob2{0%,15%{left:15%}55%,80%{left:72%}100%{left:15%}}
@keyframes fillb{0%,15%{width:15%}55%,80%{width:72%}100%{width:15%}}
.knob2{animation:knob2 6s cubic-bezier(.6,0,.3,1) infinite}
.fillbar{animation:fillb 6s cubic-bezier(.6,0,.3,1) infinite}
.note-ic{width:14px;height:14px;flex:0 0 14px}
/* ===== responsivo ===== */
@media (max-width: 1100px){
 .fig-body{grid-template-columns:180px 1fr 0}
 .fig-r{display:none}
}
@media (max-width: 1024px){
 .dm-toggle,.gridov,.coord,.cross-x,.cross-y{display:none!important}
 .wrap,.sec{padding-left:28px!important;padding-right:28px!important}
 .h2x{font-size:56px!important}
 .hbig{font-size:68px!important}
 .g12{grid-template-columns:1fr!important;gap:40px!important}
 .g12>div,.g12>p{grid-column:auto!important}
 .stage{height:500px}
 .steps{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:48px!important}
 .travel,.pline{display:none}
 .sobre .artcard{max-width:440px}
 .projs{gap:56px 18px}
 .hhead{padding:22px 28px!important}
}
@media (max-width: 760px){
 .fig-body{grid-template-columns:1fr;height:440px}
 .fig-l{display:none}
 .board{transform:scale(.62)}
 .fig-top .file,.fig-top .avs span{display:none}
 .fig-note{right:12px;bottom:12px}
}
@media (max-width: 680px){
 .wrap,.sec{padding-left:20px!important;padding-right:20px!important}
 .h2x{font-size:42px!important;line-height:1.04!important}
 .hide-m,.hnav-l{display:none!important}
 #topo{height:auto!important;padding-bottom:110px}
 .hhead{grid-template-columns:1fr auto!important;padding:18px 20px!important}
 .hhead .hlogo{justify-self:start!important}
 .chip-glass{height:38px;padding:0 14px;font-size:13px}
 .hcontent{padding:140px 20px 0!important}
 .hbig{font-size:46px!important;line-height:1.02!important}
 .btnrow{flex-direction:column;align-items:stretch!important;gap:8px!important;width:100%}
 .btn-p{justify-content:space-between}
 .btn-g{justify-content:center}
 .projs{grid-template-columns:1fr;gap:48px}
 .proj.wide{grid-column:auto}
 .proj .img,.proj.wide .img{aspect-ratio:4/3;border-radius:20px}
 .proj h3{font-size:26px}
 .proj{cursor:pointer}
 #projetos{padding-top:110px!important;padding-bottom:80px!important}
 #processo-criativo{padding-top:80px!important;padding-bottom:110px!important}
 .fig{border-radius:18px}
 .fig-body{height:330px}
 .board{transform:scale(.52)}
 #servicos{padding-top:80px!important;padding-bottom:90px!important}
 .stage{height:470px;border-radius:24px}
 .win{left:16px;right:16px;top:20px;bottom:64px}
 .cap{left:18px;bottom:22px;font-size:13px}
 .layer [style*="font-size:64px"]{font-size:38px!important}
 .layer [style*="left:40px; top:44px"]{left:18px!important;top:24px!important;right:18px!important}
 .layer [style*="bottom:76px"]{left:16px!important;right:16px!important;bottom:60px!important}
 .toast{padding:12px 14px;gap:10px}
 .toast small{display:none}
 .win[style*="display:flex"]{flex-direction:column;padding:18px!important;gap:14px!important}
 .win[style*="display:flex"]>div:last-child{width:auto!important}
 .sv-t{font-size:28px}
 .sobre{padding-bottom:100px!important}
 .sobre h2{font-size:42px!important}
 .facts{grid-template-columns:1fr}
 .steps{grid-template-columns:1fr!important;row-gap:32px!important}
 #processo{padding-bottom:110px!important}
 #contato{padding:0 10px 10px!important}
 .foot{padding:100px 20px 40px!important}
 .foot h2{font-size:42px!important}
 .footbar{flex-direction:column;gap:18px;margin-top:90px!important}
 .dmark{width:300px}
 .dm-toggle{display:none}
 .follow{display:none}
}
@media (hover: none){.dm-toggle{display:none}.follow{display:none}.proj{cursor:pointer}}
@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}
.skip{position:absolute;left:12px;top:-60px;z-index:99;background:#F2EFEA;color:#0B0B0B;padding:10px 16px;border-radius:999px;font-size:14px}.skip:focus{top:12px}
:focus-visible{outline:2px solid #FF7A1A;outline-offset:3px}