:root{--bg:#050505;--fg:#f4f4f2;--mute:#8d9096;--line:rgba(255,255,255,.14);--silver:linear-gradient(135deg,#fff,#9ea3ab 60%,#e8eaee);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
*,*::before,*::after{box-sizing:inherit;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
body{background:var(--bg);color:var(--fg);font:400 1rem/1.6 "Instrument Sans",system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3,.disp{font-family:"Unbounded",system-ui,sans-serif;font-weight:200;letter-spacing:.02em;line-height:1.05}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{padding:0 clamp(1.1rem,5vw,4rem)}

/* preloader */
#pre{position:fixed;inset:0;z-index:100;display:grid;place-items:center}
#pre .pn{position:absolute;left:0;right:0;height:50.5%;background:var(--bg);transition:transform 1.1s cubic-bezier(.76,0,.24,1)}
#pre .t{top:0}#pre .b{bottom:0}
#pre.go .t{transform:translateY(-101%)}#pre.go .b{transform:translateY(101%)}
#pre .pc{position:relative;z-index:2;display:grid;place-items:center;gap:1.8rem;transition:transform 1.1s cubic-bezier(.7,0,.2,1),opacity .7s .2s}
#pre.go .pc{transform:scale(10);opacity:0}
#pre img{width:min(36vw,160px);clip-path:inset(100% 0 0 0);animation:kin 1s .3s cubic-bezier(.7,0,.2,1) forwards}
@keyframes kin{to{clip-path:inset(0)}}
#pre.fx img{animation:kin 0s forwards,gl .35s steps(2) 2}
@keyframes gl{25%{transform:translate(-5px,1px);filter:drop-shadow(8px 0 0 rgba(255,255,255,.5))}60%{transform:translate(4px,-1px);filter:drop-shadow(-8px 0 0 rgba(255,255,255,.5))}}
#pre .ln{display:block;height:1px;width:min(60vw,320px);background:linear-gradient(90deg,transparent,#fff,transparent);transform:scaleX(0);transition:transform 1.7s cubic-bezier(.7,0,.2,1)}
#pre.run .ln{transform:scaleX(1)}
#pre .cnt{position:absolute;z-index:2;left:clamp(1.1rem,5vw,4rem);bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));font:200 .8rem "Unbounded",sans-serif;letter-spacing:.1em;color:var(--mute);transition:opacity .4s}
#pre.go .cnt{opacity:0}
#flash{position:absolute;inset:0;z-index:3;background:#fff;opacity:0;pointer-events:none}
#pre.go #flash{animation:fl .8s ease-out}
@keyframes fl{15%{opacity:.85}100%{opacity:0}}
/* nav */
nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1rem clamp(1.1rem,5vw,4rem)}
nav::before{content:"";position:absolute;inset:0 0 -24px;background:linear-gradient(var(--bg) 40%,transparent);z-index:-1}
nav img{width:40px}
nav a.btn{font-size:.9rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.4rem;border:1px solid var(--fg);border-radius:99px;font-weight:600;transition:background .3s,color .3s}
.btn:hover,.btn:focus-visible{background:var(--fg);color:var(--bg);outline:none}
.btn.solid{background:var(--fg);color:var(--bg)}
.btn.solid:hover{background:transparent;color:var(--fg)}
/* hero lens */
#hero{height:260vh;position:relative}
#hero .stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
#hero .intro{position:absolute;text-align:center;padding:0 1rem;will-change:transform,opacity}
#hero .intro img{width:min(70vw,521px);margin:0 auto}
#hero .intro p{color:var(--mute);margin-top:1.5rem;font-size:.95rem}
#hero .iris{position:absolute;inset:0;clip-path:circle(0% at 50% 50%);will-change:clip-path}
.slot{position:relative;display:grid;place-items:center;text-align:center;background:radial-gradient(120% 120% at 30% 20%,#2a2d33,#0b0c0e 70%);border:1px solid var(--line);color:var(--mute);overflow:hidden}
.slot::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);transform:translateX(-100%);animation:sheen 4s infinite}
@keyframes sheen{to{transform:translateX(100%)}}
.slot b{display:block;color:var(--fg);font-family:"Unbounded";font-weight:400;font-size:clamp(.8rem,2.4vw,1.1rem)}
.slot .play{width:64px;height:64px;border:1px solid var(--fg);border-radius:50%;display:grid;place-items:center;margin:0 auto .8rem;color:var(--fg)}
#hero .iris .slot{height:100%;border:0}
#hero .claim{position:absolute;bottom:12vh;left:0;right:0;text-align:center;z-index:2;opacity:0}
#hero .claim h2{font-size:clamp(1.6rem,5.5vw,4rem);font-weight:400}
.hint{position:absolute;bottom:3vh;color:var(--mute);font-size:.8rem;z-index:3}
/* manifesto */
#man{padding-block:30vh}
#man p{font:200 clamp(1.5rem,5vw,4.2rem)/1.25 "Unbounded";max-width:min(100%,1100px)}
#man span{opacity:.15;transition:opacity .3s}
#man span.on{opacity:1}
/* sections */
section{position:relative}
.head{padding:12vh 0 4vh;display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}
.head h2{font-size:clamp(1.8rem,5vw,3.6rem)}
.head p{color:var(--mute);max-width:34ch}
/* horizontal works */
#works{height:260vh}
#works .stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
#track{display:flex;gap:1.2rem;padding:0 clamp(1.1rem,5vw,4rem);will-change:transform}
#works{--h:clamp(230px,44svh,440px)}
.work{flex:0 0 auto;width:calc(var(--h)*1.78)}
.work .slot{height:var(--h)}
.work.v{width:calc(var(--h)*.5625)}

.work h3{font-size:1.1rem;font-weight:400;margin-top:.9rem}

.work small{color:var(--mute)}
/* models */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.filters button{background:none;color:var(--fg);border:1px solid var(--line);padding:.55rem 1.1rem;border-radius:99px;font:inherit;cursor:pointer;transition:.3s}
.filters button.on{background:var(--fg);color:var(--bg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1rem}
.card{transition:opacity .4s,transform .4s}
.card.off{opacity:0;transform:scale(.92);pointer-events:none;position:absolute;visibility:hidden}
.card .slot{aspect-ratio:5/6}
.card:hover .slot{border-color:var(--fg)}
.card p{margin-top:.6rem;font-size:.95rem}
/* services */
.svc{display:grid;gap:0;border-top:1px solid var(--line)}
.svc div{padding:2.2rem 0;border-bottom:1px solid var(--line);display:grid;gap:.6rem;transition:padding .4s}
.svc div:hover{padding-left:1.2rem}
.svc h3{font-size:clamp(1.5rem,4.5vw,2.8rem);font-weight:400}
.svc p{color:var(--mute);max-width:48ch}
@media(min-width:800px){.svc div{grid-template-columns:1fr 1fr;align-items:center}}
/* cta + footer */
#cta{padding-block:16vh;text-align:center}
#cta h2{font-size:clamp(2rem,8vw,6rem);font-weight:400;margin-bottom:2rem}
/* floating */
#wa{position:fixed;right:max(1rem,env(safe-area-inset-right,0px));bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:60;background:rgba(5,5,5,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#wa:hover,#wa:focus-visible{background:var(--fg)}
#tc{position:fixed;left:clamp(1.1rem,5vw,4rem);bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));z-index:60;font:200 .8rem "Unbounded";color:var(--mute);letter-spacing:.1em;mix-blend-mode:difference}
#cur{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:200;transition:width .3s,height .3s;display:none}
#cur.big{width:84px;height:84px}
@media(pointer:fine){#cur{display:block}}
/* reveal in/out */
.rv{clip-path:inset(0 0 100% 0);transform:translateY(40px);transition:clip-path 1s cubic-bezier(.7,0,.2,1),transform 1s cubic-bezier(.7,0,.2,1)}
.rv.in{clip-path:inset(0 0 0 0);transform:none}
.rv.out{clip-path:inset(100% 0 0 0);transform:translateY(-40px)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{clip-path:none;transform:none}#man span{opacity:1}}

/* planos */
.plans{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.plan{border:1px solid var(--line);border-radius:28px;padding:2rem 1.6rem;display:flex;flex-direction:column;gap:1rem;transition:border-color .4s,transform .4s}
.plan:hover{border-color:var(--fg);transform:translateY(-6px)}
.plan.hot{background:linear-gradient(160deg,#17181b,#0a0a0b);border-color:#6d7178}
.plan small,.plan p{color:var(--mute)}
.plan h3{font-size:1.8rem;font-weight:400}
.plan ul{list-style:none;padding:0;display:grid;gap:.6rem;flex:1}
.plan li::before{content:"— ";color:var(--mute)}
.plan .tag{align-self:flex-start;font-size:.75rem;border:1px solid var(--fg);border-radius:99px;padding:.2rem .7rem}
.plan .btn{justify-content:center}
/* equipe */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1rem;padding-bottom:12vh}
.team .slot{aspect-ratio:3/4;filter:grayscale(1);transition:filter .5s,border-color .5s}
.team article:hover .slot{filter:none;border-color:var(--fg)}
.team h3{font-size:1.05rem;font-weight:400;margin-top:.8rem}
.team small{color:var(--mute)}
#plans{padding-bottom:6vh}
/* rodapé */
.foot{border-top:1px solid var(--line);padding:6rem 0 6rem;overflow:hidden}
.foot-top{display:grid;gap:2.5rem;grid-template-columns:1.4fr .8fr 1.3fr}
@media(max-width:700px){.foot-top{grid-template-columns:1fr}}
.foot-brand img{width:52px;margin-bottom:1rem}
.foot-brand p{color:var(--mute);max-width:32ch}
.foot-col{display:grid;gap:.6rem;align-content:start}
.foot-col h4{font:400 .8rem "Unbounded",sans-serif;color:var(--mute);margin-bottom:.4rem}
.foot-col a{width:fit-content;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s}
.foot-col a:hover{background-size:100% 1px}
.foot-big{font:200 clamp(3rem,17vw,16rem)/.8 "Unbounded",sans-serif;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28);margin:4rem 0 2rem;text-align:center;user-select:none}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--mute);font-size:.85rem}
.foot-bot a:hover{color:var(--fg)}

/* entrada avançada */
#hero .intro img{opacity:0}
.ready #hero .intro img{animation:hin 1.9s .45s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes hin{0%{opacity:0;filter:blur(18px);transform:scale(1.22);clip-path:inset(0 50% 0 50%)}60%{opacity:1}100%{opacity:1;filter:blur(0);transform:none;clip-path:inset(0)}}
.tilt{transition:transform .25s ease-out;will-change:transform}
nav,#wa,#tc{opacity:0;transition:opacity 1s .9s}
.ready nav,.ready #wa,.ready #tc{opacity:1}
#grain{position:fixed;inset:-50%;z-index:45;pointer-events:none;opacity:.07;will-change:transform;background-image: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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:gr .8s steps(8) infinite}
@keyframes gr{12%{transform:translate(-5%,3%)}25%{transform:translate(4%,-6%)}37%{transform:translate(-7%,-2%)}50%{transform:translate(3%,6%)}62%{transform:translate(-3%,5%)}75%{transform:translate(6%,2%)}87%{transform:translate(-4%,-5%)}}
.hm,.dots{display:none}
@media(prefers-reduced-motion:reduce){#hero .intro img,nav,#wa,#tc{opacity:1!important}#grain{display:none}}
/* carrosséis no celular */
@media(max-width:800px){
  .car{position:relative;display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:flex-start;margin-inline:calc(-1*clamp(1.1rem,5vw,4rem));padding-inline:clamp(1.1rem,5vw,4rem);scroll-padding-inline:clamp(1.1rem,5vw,4rem);-webkit-overflow-scrolling:touch}
  .car::-webkit-scrollbar{display:none}
  .car>*{flex:0 0 78%;scroll-snap-align:start}
  .team.car>*{flex-basis:60%}
  .plans.car{align-items:stretch}
  .card.off{display:none}
  .dots{display:flex;justify-content:center;gap:.45rem;margin-top:1.2rem}
  .dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.25);transition:width .3s,background .3s}
  .dots i.on{width:20px;background:var(--fg)}
  .hd{display:none}.hm{display:inline}
  #works{height:auto!important;padding-bottom:10vh}
  #works .stick{position:static;height:auto;padding-top:6vh;overflow:visible}
  #track.car{margin-inline:0;transform:none!important}
  #track.car>.work{flex:0 0 80vw;width:80vw}
  #track.car>.work.v{flex-basis:46vw;width:46vw}
  .work .slot{height:auto;aspect-ratio:16/9}
  .work.v .slot{aspect-ratio:9/16}
  .team.car{padding-bottom:6vh}
}

/* play: visor de câmera */
.slot>div{position:relative;z-index:1}
.slot[data-play]{cursor:pointer}
.slot[data-play]:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
.slot .play{position:relative;transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s,color .3s}
.play::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(255,255,255,.5);animation:spin 12s linear infinite}
.play::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid #fff;animation:ping 2.4s infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.slot:hover .play{transform:scale(1.15);background:var(--fg);color:var(--bg)}
.slot[data-play]::before{content:"";position:absolute;inset:16px;pointer-events:none;opacity:0;z-index:2;transition:opacity .3s,inset .45s cubic-bezier(.2,.8,.2,1);background:linear-gradient(#fff,#fff) 0 0/18px 1.5px,linear-gradient(#fff,#fff) 0 0/1.5px 18px,linear-gradient(#fff,#fff) 100% 0/18px 1.5px,linear-gradient(#fff,#fff) 100% 0/1.5px 18px,linear-gradient(#fff,#fff) 0 100%/18px 1.5px,linear-gradient(#fff,#fff) 0 100%/1.5px 18px,linear-gradient(#fff,#fff) 100% 100%/18px 1.5px,linear-gradient(#fff,#fff) 100% 100%/1.5px 18px;background-repeat:no-repeat}
.slot[data-play]:hover::before{opacity:.9;inset:9px}
.rec{position:absolute;left:24px;top:22px;z-index:3;display:flex;align-items:center;gap:.5rem;font:400 .68rem "Unbounded",sans-serif;letter-spacing:.08em;color:var(--fg);opacity:0;transition:opacity .3s}
.rec i{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.slot:hover .rec{opacity:1}
.pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.slot:hover .pv{opacity:1}
/* player em tela cheia */
#lb{position:fixed;inset:0;z-index:150;background:#000;display:flex;flex-direction:column;visibility:hidden;clip-path:circle(0% at var(--x,50%) var(--y,50%));transition:clip-path .9s cubic-bezier(.7,0,.2,1),visibility 0s .9s}
#lb.open{visibility:visible;clip-path:circle(150% at var(--x,50%) var(--y,50%));transition:clip-path .9s cubic-bezier(.7,0,.2,1),visibility 0s}
.lb-x{position:absolute;top:calc(1rem + env(safe-area-inset-top,0px));right:clamp(1.1rem,5vw,4rem);z-index:5;background:none;color:var(--fg);border:1px solid var(--line);border-radius:99px;padding:.6rem 1.1rem;font:inherit;cursor:pointer;transition:.3s}
.lb-x:hover,.lb-x:focus-visible{background:var(--fg);color:var(--bg);outline:none}
.lb-main{flex:1;min-height:0;display:grid;place-items:center;padding:4.5rem 1rem 0}
.lb-stage{display:grid;gap:.8rem}
.lb-media{position:relative;background:radial-gradient(120% 120% at 30% 20%,#2a2d33,#0b0c0e 70%);border:1px solid var(--line);overflow:hidden;transform:scale(.9);opacity:0;transition:transform 1s .35s cubic-bezier(.2,.8,.2,1),opacity .6s .35s}
#lb.open .lb-media{transform:none;opacity:1}
.demo{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:.6rem;color:var(--mute);padding:1rem;font-size:.9rem}
.demo b{font:400 clamp(1rem,3vw,1.6rem) "Unbounded",sans-serif;color:var(--fg)}
.lb-ctrl{display:flex;align-items:center;gap:.9rem;color:var(--mute);font-size:.85rem}
.lb-ctrl[hidden]{display:none}
.lb-ctrl button{background:none;border:0;color:var(--fg);font:inherit;cursor:pointer;padding:.3rem .2rem}
.lb-bar{position:relative;flex:1;height:3px;background:rgba(255,255,255,.2);border-radius:9px;cursor:pointer}
.lb-bar::after{content:"";position:absolute;inset:-12px 0}
.lb-bar b{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;border-radius:9px}
#lbt{min-width:6.5rem;text-align:right;font-variant-numeric:tabular-nums}
.lb-info{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.1rem clamp(1.1rem,5vw,4rem) calc(1.3rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.lb-info h3{font-size:1.05rem;font-weight:400}
.lb-info small{color:var(--mute)}
.lb-act{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.lb-nv{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--fg);cursor:pointer;font:inherit;transition:.3s}
.lb-nv:hover,.lb-nv:focus-visible{background:var(--fg);color:var(--bg);outline:none}

/* zoom nos cards e fotos (modelos e equipe) */
.card .slot,.team .slot{transition:transform .7s cubic-bezier(.2,.8,.2,1),border-color .5s,filter .5s}
.card .slot>div,.team .slot>div{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.pv{transition:opacity .4s,transform 1s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){
  .card:hover .slot,.team article:hover .slot{transform:scale(1.035)}
  .card:hover .slot>img,.card:hover .pv,.team article:hover .slot>img{transform:scale(1.12)}
  .card:hover .slot>div,.team article:not(.member):hover .slot>div,.team article:hover .slot .ph{transform:scale(1.07)}
}
@media(hover:none){.team article:hover .slot{filter:grayscale(1);border-color:var(--line)}}
@media(max-width:800px){
  h1,h2,#man p{font-weight:300}
  .grid.car>*,.team.car>*{transform:scale(.93);opacity:.55;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,clip-path 1s}
  .grid.car>.act,.team.car>.act{transform:none;opacity:1}
}

/* cards de modelos maiores */
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
@media(max-width:800px){.grid.car>*{flex-basis:84%}}

/* vídeo do hero */
#hero .iris{background:#000}
#hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#hero .iris::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,5,.5),rgba(5,5,5,.15) 30%,rgba(5,5,5,.45) 55%,rgba(5,5,5,.92))}

/* equipe: cards simples */
.member .slot{cursor:pointer}
.member .slot:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
.member .slot::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(5,5,5,.9))}
.member .slot .cred{position:absolute;left:1.1rem;right:1.1rem;bottom:1.1rem;z-index:3}
.member .slot .cred small{display:block;font-size:.8rem;color:#b9bcc2}
.member .slot .cred h3{font-size:clamp(1.1rem,1.8vw,1.45rem);font-weight:400;margin:.2rem 0 0;line-height:1.15}
@media(min-width:1000px){.team{grid-template-columns:1.4fr 1fr 1fr 1fr;align-items:stretch}.member.lead{display:grid}.member.lead .slot{aspect-ratio:auto;height:100%}}
@media(max-width:800px){.team.car>*{flex-basis:72%}}
/* player: foto da equipe */
#lbq{color:var(--mute);font-size:.88rem;max-width:46ch;margin-top:.3rem}
#lbig[hidden]{display:none}
.kb{animation:kb 1.6s .25s cubic-bezier(.2,.8,.2,1) both}
@keyframes kb{from{transform:scale(1.28)}to{transform:scale(1)}}

/* ritmo: chamada do hero, faixas, números e brilho prateado */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
#hero .claim{bottom:9vh;padding:0 1.2rem;pointer-events:none}
#hero .cta{display:flex;gap:1.4rem;justify-content:center;align-items:center;flex-wrap:wrap}
.lnk{color:var(--fg);font-weight:600;padding:.8rem .4rem;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s}
.lnk:hover,.lnk:focus-visible{background-size:100% 1px;outline:none}
#wa.hide{opacity:0!important;pointer-events:none}
.ready #wa{transition:opacity .5s,background .3s,color .3s,scale .18s cubic-bezier(.3,1.6,.5,1)}
#wa:active{scale:.96}
.ag{font-style:normal;background:linear-gradient(110deg,#8d9096 25%,#fff 45%,#8d9096 65%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:-260% 0}}
body{counter-reset:sec}
.head h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero) " / 06";display:block;font:200 .72rem "Unbounded",sans-serif;letter-spacing:.22em;color:var(--mute);margin-bottom:1rem}
#hero .ag{background-image:linear-gradient(110deg,#c9ccd1 25%,#fff 45%,#c9ccd1 65%)}
#hero .cta{margin-top:1.8rem}

/* hero com fotos */
.ph-hero{height:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:#000}
.ph-hero figure{margin:0;overflow:hidden;position:relative}
.ph-hero img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(.7) brightness(.8) contrast(1.05);transform:scale(1.06);animation:kbh 16s ease-in-out infinite alternate;transition:filter .8s}
.ph-hero figure:nth-child(2) img{animation-delay:-4s}
.ph-hero figure:nth-child(3) img{animation-delay:-8s}
.ph-hero figure:nth-child(4) img{animation-delay:-12s}
.ph-hero figure:hover img{filter:none}
@keyframes kbh{to{transform:scale(1.18) translateY(-2%)}}
@media(max-width:800px){
  .ph-hero{display:block;position:relative}
  .ph-hero figure{position:absolute;inset:0;opacity:0;transition:opacity 1.3s}
  .ph-hero figure.on{opacity:1}
  .ph-hero img{filter:grayscale(.35) brightness(.85)}
}
.ph-hero figure:nth-child(3) img{object-position:center 4%}

/* organização por formato (modelos e equipe): linhas justificadas */
.card .slot{aspect-ratio:var(--r)}
.member .slot,.member.lead .slot{aspect-ratio:var(--r);height:auto}
@media(min-width:801px){
  .grid{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:flex-start;justify-content:center}
  .grid .card{flex:var(--r) 1 calc(var(--r)*260px);max-width:calc(var(--r)*500px)}
  .br{flex-basis:100%;height:0;margin-top:-1.4rem}
  .team{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:flex-start}
  .team>.member{flex:var(--r) 1 calc(var(--r)*240px);max-width:calc(var(--r)*560px)}
  .member.lead{display:block}
}
@media(max-width:800px){
  .br{display:none}
  .grid.car{flex-wrap:nowrap;align-items:center}
  .grid.car>*{flex:0 0 min(86vw,calc(34vw + var(--r)*32vw));max-width:none}
}
#hero .intro img.done{animation:none!important;opacity:1;filter:none;clip-path:none;transform:none}

/* vídeos em Trabalhos: capa */
.work .slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){.work:hover .slot>img{transform:scale(1.06)}}
/* carrossel central e infinito (celular) */
@media(max-width:800px){
  .car>*{scroll-snap-align:center;scroll-snap-stop:always}
  .team.car>*{flex-basis:62%}
  .plans.car>*{flex-basis:80%}
  #track.car>.work{flex:0 0 84vw;width:84vw}
  #track.car>.work.v{flex-basis:58vw;width:58vw}
  #track.car>*,.grid.car>*,.team.car>*,.plans.car>*{transform:scale(.93);opacity:.55;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,clip-path 1s}
  #track.car>.act,.grid.car>.act,.team.car>.act,.plans.car>.act{transform:none;opacity:1}
}

/* rodapé: contatos */
.foot-contact{gap:.8rem}
.foot-col a.soc{display:flex;align-items:center;gap:1rem;width:100%;max-width:340px;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:18px;background:none;transition:border-color .4s,background .4s,transform .4s}
.soc .ico{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:background .4s,color .4s,border-color .4s}
.soc .ico svg{width:22px;height:22px}
.soc .txt{display:grid;flex:1;line-height:1.25}
.soc .txt small{color:var(--mute);font-size:.75rem}
.soc .txt b{font-weight:600;font-size:1rem}
.soc .arr{font-style:normal;color:var(--mute);transition:transform .4s,color .4s}
.foot-col a.soc:hover,.foot-col a.soc:focus-visible{border-color:var(--fg);transform:translateY(-3px);background:rgba(255,255,255,.04);outline:none}
.soc:hover .ico,.soc:focus-visible .ico{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.soc:hover .arr{transform:translate(3px,-3px);color:var(--fg)}

/* clique de câmera + luz que segue o mouse */
#shot{position:fixed;inset:0;z-index:190;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.3),rgba(255,255,255,.06) 30%,transparent 55%)}
#shot.go{animation:shot .38s ease-out}
@keyframes shot{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
#glow{position:fixed;left:0;top:0;width:680px;height:680px;margin:-340px 0 0 -340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 62%);pointer-events:none;z-index:2;opacity:0;transition:opacity .8s;will-change:transform}
#glow.on{opacity:1}
@media(pointer:coarse){#glow{display:none}}
@media(prefers-reduced-motion:reduce){#shot,#glow{display:none}}

/* comentários */
.cm{position:relative;display:flex;gap:1.2rem;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1*clamp(1.1rem,5vw,4rem));padding:.4rem clamp(1.1rem,5vw,4rem)}
.cm::-webkit-scrollbar{display:none}
.cm>*{flex:0 0 min(400px,84vw);scroll-snap-align:center;scroll-snap-stop:always}
#cm>*{transform:scale(.94);opacity:.5;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,clip-path 1s}
#cm>.act{transform:none;opacity:1}
.cm-nav{display:flex;gap:.6rem;justify-content:flex-end;margin-bottom:1rem}
.cm-nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--fg);cursor:pointer;font:inherit;transition:.3s}
.cm-nav button:hover,.cm-nav button:focus-visible{background:var(--fg);color:var(--bg);outline:none}
#cm+.dots{display:flex;justify-content:center;gap:.45rem;margin-top:1.2rem}
#cm+.dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.25);transition:width .3s,background .3s}
#cm+.dots i.on{width:20px;background:var(--fg)}
.cmc{border:1px solid var(--line);border-radius:24px;padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:1rem;transition:border-color .4s,transform .4s}
.cmc:hover{border-color:var(--fg);transform:translateY(-4px)}
.cmc .st{letter-spacing:.2em;font-size:.85rem}
.cmc .cmt{font-size:1rem;line-height:1.55;color:#e6e7e9}
.cmc .by{margin-top:auto;display:flex;align-items:center;gap:.7rem;color:var(--mute);font-size:.9rem}
.cmc .av{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font:400 .8rem "Unbounded",sans-serif;color:var(--fg)}
.cm .empty{color:var(--mute);grid-column:1/-1}
.cmf{margin-top:2.4rem;max-width:640px;display:grid;gap:.9rem;border:1px solid var(--line);border-radius:24px;padding:1.6rem}
.cmf h3{font-size:1.15rem;font-weight:400}
.cmf input,.cmf textarea{width:100%;background:transparent;border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;color:var(--fg);font:inherit;resize:vertical}
.cmf input:focus,.cmf textarea:focus{outline:none;border-color:var(--fg)}
.cmf .row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.cmf .row input{flex:1 1 200px;width:auto}
.stars{display:flex;gap:.1rem}
.stars button{background:none;border:0;color:#5b5f66;font-size:1.5rem;cursor:pointer;padding:.1rem .15rem;transition:color .2s,transform .2s}
.stars button.on{color:var(--fg)}
.stars button:hover{transform:scale(1.15)}
.cmfoot{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.cmf .cc{color:var(--mute);font-size:.8rem}
.cmf .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.msg{min-height:1.2em;color:var(--mute);font-size:.9rem}
@media(max-width:800px){
  .cm.car>*{flex-basis:86%;transform:scale(.93);opacity:.55;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,clip-path 1s}
  .cm.car>.act{transform:none;opacity:1}
}

/* botão de qualidade */
.qwrap{position:relative}
.qbtn{display:flex;gap:.5rem;align-items:center;background:rgba(5,5,5,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--fg);border:1px solid var(--line);border-radius:99px;padding:.55rem 1rem;font:inherit;font-size:.85rem;cursor:pointer;transition:border-color .3s}
.qbtn b{font-weight:600}
.qbtn:hover,.qbtn:focus-visible,.qbtn[aria-expanded=true]{border-color:var(--fg);outline:none}
.qmenu{position:absolute;right:0;top:calc(100% + .6rem);min-width:260px;background:rgba(10,10,11,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;padding:.5rem;display:grid;gap:.2rem}
.qmenu[hidden]{display:none}
.qmenu button{background:none;border:0;color:var(--fg);text-align:left;padding:.7rem .9rem;border-radius:12px;cursor:pointer;display:grid;gap:.1rem;font:inherit}
.qmenu button small{color:var(--mute);font-size:.78rem}
.qmenu button:hover,.qmenu button:focus-visible{background:rgba(255,255,255,.07);outline:none}
.qmenu button.on b::after{content:" ✓"}

/* hero: foto no computador, vídeo no celular */
@media(min-width:801px){#hv{display:none}}
@media(max-width:800px){.ph-hero{display:none}}
@media(min-width:801px){.plans+.dots{display:none}}

/* SEO e acessibilidade */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-4rem;z-index:300;background:var(--fg);color:var(--bg);padding:.6rem 1rem;border-radius:99px;font-weight:600;transition:top .2s}
.skip:focus{top:1rem;outline:none}
/* perguntas frequentes */
.faq{max-width:860px;padding-bottom:12vh}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:1.3rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:1.1rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font:200 1.6rem "Unbounded",sans-serif;transition:transform .3s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa summary:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
.qa p{color:var(--mute);padding:0 2.5rem 1.4rem 0;max-width:62ch}

/* computador: rolagem como antes, só cards maiores (horizontais maiores que os verticais) */
.card.off{display:none}
.cm-nav[hidden]{display:none}
#cm:has(.empty)+.dots{display:none}
#cm>.empty{opacity:1;transform:none;flex:0 1 auto;scroll-snap-align:start}
.cmf{margin:2.4rem auto 0}
@media(min-width:801px){
  #works{--h:clamp(320px,62svh,600px)}
  #track{align-items:center}
  .work:not(.v){width:calc(var(--h)*.62*1.78)}
  .work:not(.v) .slot{height:calc(var(--h)*.62)}
  .work.v{width:calc(var(--h)*.5625)}
  .pair{flex:0 0 auto;width:calc((var(--h) - 4.7rem)/2*1.7778);display:flex;flex-direction:column;gap:1rem}
  .pair>.work:not(.v){width:100%}
  .pair>.work:not(.v) .slot{height:calc((var(--h) - 4.7rem)/2)}
  .grid .card.v{flex:1 1 calc(var(--r)*540px);max-width:calc(var(--r)*580px)}
  .grid .card.hz{flex:1 1 calc(var(--r)*300px);max-width:calc(var(--r)*400px)}
}

/* planos no celular: cartões compactos e padronizados */
@media(max-width:800px){
  .plans.car>*{flex-basis:86%}
  .plans.car{align-items:stretch}
  .plan{padding:1.4rem 1.25rem;gap:.8rem;border-radius:24px}
  .plan small{font-size:.75rem}
  .plan h3{font-size:1.45rem}
  .plan p{font-size:.88rem;line-height:1.45}
  .plan ul{align-content:start;flex:1 1 auto;gap:.55rem;margin:0;padding:.2rem 0 .4rem}
  .plan li{font-size:.88rem;line-height:1.4;display:flex;gap:.6rem;align-items:flex-start}
  .plan li::before{content:"";flex:none;width:5px;height:5px;margin-top:.5em;border-radius:50%;background:var(--fg)}
  .plan .btn{margin-top:auto;padding:.75rem 1rem;font-size:.95rem}
  .plan .tag{font-size:.7rem}
}
.lgpd{font-size:.78rem;color:var(--mute);line-height:1.5;margin:.2rem 0 0}
.lgpd a,.foot-bot span a{text-decoration:underline;text-underline-offset:3px}
.lgpd a:hover,.foot-bot span a:hover{color:var(--fg)}

/* toque: afunda e volta */
.btn,.cm-nav button,#qb,#qm button,.lb-ctrl button,.lb-x,.stars button,summary{transition-property:background,color,scale;transition-duration:.3s,.3s,.18s;transition-timing-function:ease,ease,cubic-bezier(.3,1.6,.5,1)}
.btn:active,.cm-nav button:active,#qb:active,#qm button:active,.lb-ctrl button:active,.lb-x:active,.stars button:active{scale:.96;transition-duration:.3s,.3s,.08s}
/* barra de progresso */
#prog{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:2px;z-index:80;pointer-events:none;background:linear-gradient(90deg,#8d9096,#fff);transform:scaleX(0);transform-origin:0 50%;opacity:0;transition:opacity 1s .9s;box-shadow:0 0 8px rgba(255,255,255,.35)}
.ready #prog{opacity:1}
@media(prefers-reduced-motion:reduce){#prog{opacity:1!important}}

/* média das estrelas */
.cm-sum{display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;margin:0 0 1.4rem}
.cm-sum[hidden]{display:none}
.cm-sum b{font:300 clamp(2rem,6vw,2.8rem)/1 "Unbounded",sans-serif}
.cm-sum .st{letter-spacing:.18em;font-size:1rem}
.cm-sum small{color:var(--mute);font-size:.9rem}
.cmf .own{color:var(--mute);font-size:.85rem}

/* cards deitados: 2 por coluna (um em cima do outro) */
@media(max-width:800px){
  #track.car>.pair{flex:0 0 84vw;width:84vw;display:flex;flex-direction:column;gap:1.4rem}
  .pair>.work{width:100%}
}