/* PORTFÓLIO */
.ph{padding:clamp(140px,16vw,240px) 0 clamp(40px,5vw,70px);background:var(--ink)}
.ph h1{max-width:12ch;margin:18px 0 26px}
.gl{padding-bottom:clamp(60px,8vw,120px);background:var(--ink)}
.gl-head{display:grid;gap:14px;margin-bottom:34px}
.gl-vid{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/9;background:#000;box-shadow:0 60px 140px -50px rgba(251,95,26,.35),0 0 0 1px var(--line)}
.gl-vid video{width:100%;height:100%;object-fit:cover}
.gl-play{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,.05));transition:opacity .4s}
.gl-play i{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--ember);color:#0f0f11;font-style:normal;font-size:28px;transition:transform .5s var(--ease);padding-left:6px}
.gl-play:hover i{transform:scale(1.12)}
.gl-vid.playing .gl-play{opacity:0;pointer-events:none}
.gl-cap{margin-top:18px;color:var(--steel-2)}
.pj{padding-block:clamp(70px,9vw,140px);border-top:1px solid var(--line);background:linear-gradient(120deg,color-mix(in srgb,var(--c) 14%,#0f0f11),#0f0f11 55%)}
.pj-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,90px);align-items:start}
.pj-info{display:grid;gap:20px;position:sticky;top:110px;align-content:start}
.pj-n{color:var(--c)}
.pj-info h2{font-size:clamp(46px,6.4vw,110px)}
.pj-info .lead{color:#c3c3c8;max-width:44ch;font-size:clamp(17px,1.35vw,21px)}
.status{display:inline-block;justify-self:start;padding:6px 12px;border-radius:99px;border:1px solid var(--line);color:var(--steel-3)}
.status.ok{border-color:var(--c);color:var(--c)}
.pj-list{list-style:none;display:grid;gap:10px;color:#b8b8bd;font-size:15.5px}
.pj-list li{display:flex;gap:12px}
.pj-list li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;border-radius:50%;background:var(--c)}
.pj-info .btn{justify-self:start;background:var(--c);color:#0f0f11}
.pj-info .btn .ic{background:#0f0f11;color:var(--c)}
.tg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);padding:5px;justify-self:start}
.tg button{position:relative;z-index:1;padding:10px 26px;border-radius:99px;font-weight:600;font-size:14px;color:var(--steel-2);transition:color .3s}
.tg button.on{color:#0f0f11}
.tg i{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:99px;background:var(--c);transition:transform .5s var(--ease)}
.tg.t i{transform:translateX(100%)}
.pj-shot{perspective:1600px}
.browser{position:relative;border-radius:18px;overflow:hidden;background:#1b1b1f;box-shadow:0 60px 140px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1);transform:rotateY(-3deg) rotateX(1.5deg);transition:transform .8s var(--ease)}
.browser:hover{transform:none}
.browser>i{display:block;height:36px;background:#232328;position:relative}
.browser>i::before{content:"";position:absolute;left:14px;top:13px;width:10px;height:10px;border-radius:50%;background:#ff5f57;box-shadow:16px 0 #febc2e,32px 0 #28c840}
.vp{position:relative;aspect-ratio:16/11;overflow:hidden}
.vp img.long{width:100%;height:auto;max-width:none;will-change:transform}
@media(max-width:960px){.pj-grid{grid-template-columns:1fr}.pj-info{position:static}.browser{transform:none}}
.pcta{text-align:center}.pcta h2{max-width:14ch;margin:0 auto 20px}