/* Visual sections (visual-sections.js): manifesto pin with floating imagery, service previews, horizontal process, giant contact marquee. */

/* ---------- Manifesto ---------- */
html.vs-ready body.editorial-site .manifesto.mf-pinned{height:230svh!important}
html.vs-ready body.editorial-site .manifesto.mf-pinned .manifesto-stage{position:sticky!important;top:0!important;height:100svh;min-height:100svh!important;overflow:hidden}
html.vs-ready body.editorial-site .manifesto.mf-pinned .manifesto-content{position:relative;z-index:2;min-height:100svh}
.manifesto .mw{color:rgba(244,244,242,calc(.14 + var(--lit,0) * .86));transition:color .25s linear;text-shadow:0 0 calc(var(--lit,0) * 40px) rgba(211,47,56,calc(var(--lit,0) * .25))}
.manifesto .manifesto-thought i .mw{color:rgba(211,47,56,calc(.2 + var(--lit,0) * .8))}
.manifesto .manifesto-stage::after{content:"";position:absolute;z-index:0;left:50%;top:55%;width:70vmax;height:70vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(211,47,56,.32),rgba(211,47,56,.08) 50%,transparent 72%);transform:translate(-50%,-50%) scale(calc(.6 + var(--mf-p,0) * .6));opacity:calc(.3 + var(--mf-p,0) * .7);pointer-events:none}
.mf-float{position:absolute;inset:0;z-index:1;pointer-events:none}
.mf-img{position:absolute;margin:0;overflow:hidden;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translate3d(0,var(--drift,0px),0) rotate(var(--turn,0deg));will-change:transform}
.mf-img img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.75)}
.mf-img--a{right:6%;top:9%;width:clamp(150px,15vw,250px);aspect-ratio:4/5}
.mf-img--b{right:24%;bottom:6%;width:clamp(120px,11vw,190px);aspect-ratio:4/5;filter:blur(1.5px);opacity:.75}
.mf-img--c{left:56%;top:4%;width:clamp(170px,17vw,300px);aspect-ratio:16/10;opacity:.6;filter:blur(2.5px)}
.mf-img--d{right:3%;bottom:16%;width:clamp(130px,12vw,210px);aspect-ratio:9/10}
.mf-img--e{left:-2%;bottom:3%;width:clamp(110px,10vw,170px);aspect-ratio:4/5;opacity:.55;filter:blur(3px)}
@media(max-width:760px){
  html.vs-ready body.editorial-site .manifesto.mf-pinned{height:190svh!important}
  .mf-img--b,.mf-img--c{display:none}
  .mf-img--a{right:-6%;top:6%;width:34vw}
  .mf-img--d{right:4%;bottom:6%;width:30vw}
  .mf-img--e{left:-8%;bottom:16%;width:26vw}
}

/* ---------- Especialidades ---------- */
.svc-preview{position:fixed;z-index:60;left:0;top:0;width:clamp(220px,20vw,320px);aspect-ratio:4/5;margin:calc(clamp(220px,20vw,320px) * -.6) 0 0 48px;overflow:hidden;border-radius:8px;pointer-events:none;opacity:0;box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(244,244,242,.08);transition:opacity .35s ease;will-change:transform}
.svc-preview.is-visible{opacity:1}
.svc-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.12);transition:opacity .45s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.svc-preview img.is-on{opacity:1;transform:none}
.editorial-site .expertise-v2-list .service-item{position:relative}
.editorial-site .expertise-v2-list .service-item strong{transition:transform .6s cubic-bezier(.16,1,.3,1),color .3s ease}
.svc-thumb{display:none}
@media(hover:hover) and (pointer:fine){
  .editorial-site .expertise-v2-list .service-item small{opacity:0;transform:translate3d(-14px,0,0);transition:opacity .4s ease,transform .6s cubic-bezier(.16,1,.3,1)}
  .editorial-site .expertise-v2-list .service-item.is-hot small{opacity:1;transform:none}
  .editorial-site .expertise-v2-list .service-item.is-hot strong{transform:translate3d(18px,0,0);color:var(--dt-red,#d32f38)}
  .editorial-site .expertise-v2-list:hover .service-item:not(.is-hot) strong{color:rgba(244,244,242,.35)}
}
@media(hover:none),(pointer:coarse){
  .svc-thumb{display:block;position:absolute;right:0;top:50%;width:54px;height:64px;object-fit:cover;object-position:top;border-radius:4px;transform:translateY(-50%);opacity:.85}
  .editorial-site .expertise-v2-list .service-item{padding-right:70px}
  .svc-preview{display:none}
}

/* ---------- Processo ---------- */
.proc-h .proc-track{display:grid;gap:clamp(16px,2vw,28px);margin:clamp(40px,5vw,72px) 0 0;padding:0;list-style:none}
.proc-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;gap:clamp(18px,2.4vw,40px);padding:clamp(18px,2vw,28px);border:1px solid var(--dt-line,rgba(244,244,242,.12));border-radius:10px;background:linear-gradient(160deg,rgba(29,29,33,.9),rgba(14,14,17,.9));overflow:hidden}
.proc-media{margin:0;overflow:hidden;border-radius:6px;aspect-ratio:4/3}
.proc-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(calc(1.12 - var(--focus,1) * .12));filter:grayscale(calc(1 - var(--focus,1))) brightness(calc(.55 + var(--focus,1) * .45));transition:transform .2s linear,filter .2s linear}
.proc-copy{position:relative;padding-bottom:6px}
.proc-num{display:block;font-size:clamp(90px,11vw,190px);font-weight:600;line-height:.8;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(244,244,242,calc(.25 + var(--focus,1) * .5));margin-bottom:clamp(14px,2vw,26px)}
.proc-copy h3{margin:0;font-size:clamp(30px,3.4vw,56px);font-weight:500;line-height:1;letter-spacing:-.04em;color:var(--dt-text,#f4f4f2)}
.proc-copy p{margin:12px 0 0;max-width:30ch;font-size:14px;line-height:1.6;color:var(--dt-muted,#a5a5ab)}
.proc-progress{height:2px;margin-top:clamp(24px,3vw,40px);background:rgba(244,244,242,.1);overflow:hidden}
.proc-progress i{display:block;height:100%;background:var(--dt-red,#d32f38);box-shadow:0 0 14px var(--dt-red,#d32f38);transform:scaleX(0);transform-origin:left}
#processo.is-horizontal .proc-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
#processo.is-horizontal .proc-track{display:flex;width:max-content;will-change:transform}
#processo.is-horizontal .proc-panel{width:min(72vw,980px);flex:none;opacity:calc(.45 + var(--focus,1) * .55)}
html.vs-ready body.editorial-site #processo.proc-h{padding-top:0;padding-bottom:0}
#processo.is-horizontal .proc-inner{padding-top:clamp(80px,10svh,120px);padding-bottom:clamp(40px,6svh,80px)}
@media(max-width:760px){
  .proc-panel{grid-template-columns:1fr}
  .proc-num{font-size:84px}
  html.vs-ready body.editorial-site #processo.proc-h{padding-top:clamp(80px,12svh,120px);padding-bottom:clamp(80px,12svh,120px)}
}

/* ---------- Contato ---------- */
.contact-marquee{position:absolute;z-index:1;left:0;right:0;bottom:clamp(24px,6svh,70px);overflow:hidden;pointer-events:none}
.cm-track{display:flex;align-items:center;width:max-content;will-change:transform}
.cm-track span{flex:none;padding:0 .25em;font-size:clamp(90px,15vw,260px);font-weight:600;line-height:1;letter-spacing:-.06em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(244,244,242,.3)}
.cm-track span:nth-of-type(2n){color:rgba(211,47,56,.22);-webkit-text-stroke-color:rgba(211,47,56,.7)}
.cm-track i{flex:none;width:clamp(18px,2vw,30px);height:clamp(18px,2vw,30px);margin:0 .4em;border-radius:50%;background:var(--dt-red,#d32f38);box-shadow:0 0 30px rgba(211,47,56,.8)}
.editorial-site .conversion .conversion-content{position:relative;z-index:2}
.editorial-site .conversion-whatsapp{--mx:0px;--my:0px;transform:translate3d(var(--mx),var(--my),0);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,background-color .3s ease;box-shadow:0 0 0 rgba(211,47,56,0)}
.editorial-site .conversion-whatsapp:hover{box-shadow:0 18px 60px rgba(211,47,56,.55),0 0 0 6px rgba(211,47,56,.15)}

@media(prefers-reduced-motion:reduce){
  html.vs-ready body.editorial-site .manifesto.mf-pinned{height:auto!important}
  html.vs-ready body.editorial-site .manifesto.mf-pinned .manifesto-stage{position:relative!important;height:auto}
  .mf-img{transform:none}
  .cm-track{transform:none!important}
}

/* Pinned sections: overflow hidden would make the section a scroll container and break sticky; clip keeps the crop without that. */
html.vs-ready body.editorial-site :is(#manifesto,#processo){overflow:clip!important}

/* Contact stage gets room for the marquee under the button. */
html.vs-ready body.editorial-site .conversion .conversion-content{padding-bottom:clamp(200px,26svh,300px)}
@media(max-width:760px){html.vs-ready body.editorial-site .conversion .conversion-content{padding-bottom:150px}}