:root{--background:#fff;--foreground:#111;--pink:#E80070;--orange:#FF4D00;--pink-soft:#FFF4F8;--border:#E80070;
--space-1:.5rem;--space-2:1rem;--space-3:2rem;--space-4:4rem;--space-5:8rem;--space-section:clamp(6rem,14vw,13rem);
--gutter:clamp(1.25rem,5vw,6rem);--radius-0:0;--ease-out:cubic-bezier(.16,1,.3,1);--duration-1:.25s;--duration-2:.9s;
--display:'Sora',system-ui,sans-serif;--body:'Barlow',system-ui,sans-serif;--fs-hero:clamp(1.9rem,3.6vw,3.6rem);--fs-xl:clamp(1.5rem,2.6vw,2.6rem);--fs-body:clamp(1.125rem,1.4vw,1.25rem)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{background:var(--background);color:var(--foreground);font:400 var(--fs-body)/1.55 var(--body);-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}img{max-width:100%;display:block}a{color:inherit}
h1,h2,h3,.display{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
:focus-visible{outline:3px solid var(--foreground);outline-offset:4px}
.skip{position:absolute;left:var(--gutter);top:-4rem;background:var(--foreground);color:#fff;padding:.75rem 1rem;z-index:100}.skip:focus{top:1rem}
.wrap{max-width:1680px;margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--space-section)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1rem,2vw,2rem)}
.pink{color:var(--pink)}.lead{max-width:34em}
.rule{height:2px;background:var(--pink);transform-origin:left;transform:scaleX(1)}
.js .rule{transform:scaleX(0);transition:transform 1.4s var(--ease-out)}.js .rule.in{transform:scaleX(1)}
.rule.short{width:62%}.rule.late{margin-left:18%}
.js [data-r]{opacity:0;transform:translateY(28px);transition:opacity var(--duration-2) var(--ease-out),transform var(--duration-2) var(--ease-out)}.js [data-r].in{opacity:1;transform:none}
/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding-block:1rem;background:rgba(255,255,255,.96);}
.nav .wrap{display:flex;justify-content:space-between;align-items:center}
.sig{font:800 1.5rem var(--display);text-decoration:none;letter-spacing:-.04em}
.nav ul{display:flex;gap:clamp(1rem,3vw,3rem);list-style:none;padding:0}
.nav a{text-decoration:none;font-weight:600;background:linear-gradient(var(--pink),var(--pink)) 0 100%/0 2px no-repeat;transition:background-size var(--duration-1);padding-block:.4rem;display:inline-block}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current=true]{background-size:100% 2px}
#menu-btn{display:none;background:none;border:0;font:700 1rem var(--body);min-height:44px;min-width:44px;cursor:pointer}
/* hero */
.hero{min-height:100svh;padding-top:8rem;padding-bottom:var(--space-4);align-items:end}
.hero h1{grid-column:1/9;font-size:var(--fs-hero)}.hero h1 span{display:block}
.hero-copy{grid-column:1/7;margin-top:var(--space-3)}
.hero-copy p{max-width:32em}
.ctas{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin-top:var(--space-3);align-items:center}
.btn{display:inline-block;font:800 1.125rem var(--display);text-decoration:none;background:var(--pink);color:#fff;padding:1.1rem 1.9rem;transition:background var(--duration-1),transform .3s var(--ease-out);min-height:48px}
.btn:hover,.btn:focus-visible{background:var(--orange)}
.link{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
.loc{margin-top:var(--space-2);font-size:1rem}
.hero-art{grid-column:9/13;grid-row:1;align-self:stretch;aspect-ratio:4/5;max-height:70svh;background:var(--pink-soft);position:relative;overflow:hidden;display:grid;place-items:center;margin-top:1rem} /* TODO_IMAGE_HERO: retrato vertical 4:5 ou 3:4, fundo claro/neutro, longa exposição, motion blur, rastros discretos, deslocamento rosa */
/* manifesto, métricas */
.manifesto h2{grid-column:1/12;font-size:var(--fs-xl)}.manifesto p{grid-column:6/12;margin-top:var(--space-4)}
.manifesto p+p{margin-top:1.25rem;grid-column:6/12}
#metrics{list-style:none;padding:0;display:grid;grid-template-columns:repeat(12,1fr);row-gap:var(--space-4);margin-top:var(--space-4)}
#metrics li{grid-column:span 4}#metrics li:nth-child(2){margin-top:var(--space-4)}#metrics li:nth-child(4){grid-column:7/13}
#metrics b{display:block;font:800 clamp(3.5rem,8vw,7.5rem)/.9 var(--display);letter-spacing:-.06em;color:var(--pink)}
#metrics span{display:block;font-weight:600;margin-top:.5rem;max-width:12em}
/* work */
.work{min-height:90svh;padding-block:var(--space-3) var(--space-5);position:relative}
.work .grid{margin-top:var(--space-3)}
.work .idx{grid-column:1/2;font:800 1.25rem var(--display)}
.work-text{grid-column:2/8}.work-text h3{font-size:var(--fs-xl);margin-bottom:var(--space-2)}
.work-text .name{font:700 1.125rem var(--display);margin-bottom:1rem}
.tags{margin:1.25rem 0 2rem;font-weight:600}
.ph{grid-column:8/13;aspect-ratio:16/10;align-self:end;background:var(--pink-soft);display:grid;place-items:center;font-size:.85rem;text-align:center;padding:1rem;transition:transform .6s var(--ease-out)}
@media(hover:hover){.work:hover .ph,.work:focus-within .ph{transform:translateX(-12px) scale(1.02)}}
.work:nth-of-type(even) .work-text{grid-column:6/12}.work:nth-of-type(even) .ph{grid-column:1/6;grid-row:1}.work:nth-of-type(even) .idx{grid-column:12/13;grid-row:1;text-align:right}
/* sistema (scroll) */
#sistema{height:280svh;position:relative}
#sistema .stick{position:sticky;top:0;height:100svh;display:grid;align-content:center;overflow:hidden}
#sistema h2{font-size:clamp(1.4rem,2.6vw,2.6rem);max-width:16em;position:relative;z-index:2}
.words{position:relative;height:38svh;margin-top:var(--space-3)}
.words svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.words svg line{stroke:var(--pink);stroke-width:2;stroke-dasharray:1;opacity:var(--p,1)}
/* expertise */
/* ia, história, exp */
.ia h2,.story h2,.about h2{grid-column:1/11;font-size:var(--fs-xl)}
.flow{grid-column:1/13;display:flex;flex-wrap:wrap;gap:.5rem 0;margin-top:var(--space-4);font:700 clamp(1.1rem,2vw,1.8rem) var(--display);list-style:none;padding:0}
.flow li+li::before{content:'';display:inline-block;width:clamp(1.5rem,4vw,4rem);height:2px;background:var(--pink);vertical-align:middle;margin-inline:.8rem}
.ia p,.story-text{grid-column:6/12;margin-top:var(--space-3)}.story-text p+p{margin-top:1.1rem}
.tl{list-style:none;padding:0;margin-top:var(--space-4)}
.tl li{display:grid;grid-template-columns:repeat(12,1fr);column-gap:2rem;padding-block:1.5rem;border-top:2px solid var(--pink)}
.tl b{grid-column:1/8;font:800 1.4rem var(--display)}.tl span{grid-column:8/13}.tl li:first-child b{font-size:clamp(1.4rem,2.4vw,2.3rem);line-height:1.05}.tl li:first-child{padding-block:2.5rem}
.about p{grid-column:6/12;margin-top:var(--space-3)}
.pics{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;margin-top:var(--space-4)}
.pics div{background:var(--pink-soft);display:grid;place-items:center;font-size:.85rem;padding:1rem;text-align:center}
.pics div:nth-child(1){grid-column:1/5;aspect-ratio:1}.pics div:nth-child(2){grid-column:5/13;aspect-ratio:16/9}.pics div:nth-child(3){grid-column:3/8;aspect-ratio:4/3}
.edu{margin-top:var(--space-5);font-size:1rem}.edu li{list-style:none;padding-block:.4rem}
/* cta, footer */
.cta{min-height:90svh;display:grid;align-content:center}
.cta h2{font-size:var(--fs-xl);max-width:14em}
.cta .go{display:inline-block;margin-top:var(--space-4);font:800 clamp(1.7rem,3.8vw,3.6rem)/1 var(--display);letter-spacing:-.04em;text-decoration:none;background:linear-gradient(90deg,var(--pink),var(--orange)) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:var(--pink);transition:background-position .6s var(--ease-out);padding-block:.1em}
.cta .go:hover,.cta .go:focus-visible{background-position:100% 0;color:transparent}
footer{padding-block:var(--space-3) var(--space-4)}footer .grid{margin-top:var(--space-3);font-size:1rem;row-gap:1rem}
footer .grid>*{grid-column:span 4}footer nav{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start}
/* unlock / case */
.solo{min-height:100svh;display:grid;align-content:center;gap:var(--space-3)}
.solo h1{font-size:var(--fs-hero)}
.solo input{font:700 clamp(1.5rem,4vw,3rem) var(--display);border:0;border-bottom:3px solid var(--foreground);background:none;width:min(100%,14em);padding:.4rem 0;border-radius:0}
.err{color:#111;font-weight:700;border-left:4px solid var(--orange);padding-left:1rem}
.case h2{font-size:var(--fs-xl);margin-bottom:var(--space-3)}.case section{padding-block:var(--space-4)}.case p{max-width:36em}
.case .big{font:800 clamp(4rem,12vw,11rem)/.95 var(--display);color:var(--pink);letter-spacing:-.05em}
/* mobile */
@media(max-width:860px){
 .grid,.tl li{display:block}.hero{padding-top:6.5rem}.hero-art{max-height:none;margin:var(--space-3) 0 0;aspect-ratio:4/5;width:100%}
 .hero-copy{margin-top:var(--space-3)}.manifesto p{margin-top:var(--space-3)}
 #metrics{display:block}#metrics li{margin:0 0 var(--space-3)!important}
 .work{min-height:0}.work-text,.ph{margin-top:var(--space-2)}.ph{margin-top:var(--space-3)}.work .idx{display:block}
 #metrics b{font-size:clamp(3.5rem,18vw,6rem)}
 #sistema{height:230svh}
 .pics{display:block}.pics div{margin-bottom:1rem;width:100%}.pics div:nth-child(n){aspect-ratio:4/3}
 .tl b,.tl span{display:block}.tl span{margin-top:.3rem}
 .flow li+li::before{width:1.2rem}footer .grid>*{display:block;margin-bottom:1.25rem}
 #menu-btn{display:block}#nav-links{position:fixed;inset:0;background:#fff;flex-direction:column;justify-content:center;padding:var(--gutter);gap:.6rem;font:800 clamp(2.2rem,11vw,3.5rem) var(--display);display:none}
 #nav-links.open{display:flex}#nav-links a{padding-block:.6rem}
 .nav{z-index:60}.sig,#menu-btn{position:relative;z-index:70}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js [data-r]{opacity:1;transform:none}.js .rule{transform:none}}

/* v2 */
html{scroll-padding-top:4.5rem}
#expertise,#experiencia,#sobre{scroll-margin-top:calc(var(--space-section)*-.55)}
.hero-art{aspect-ratio:3/4;background:none}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05) translate(calc(var(--mx,0)*-10px),calc(var(--my,0)*-10px));transition:transform .4s var(--ease-out)}
#expertise-list{list-style:none;padding:0;margin-top:var(--space-4);display:block}
#expertise-list li{display:grid;grid-template-columns:repeat(12,1fr);column-gap:2rem;align-items:baseline;padding-block:.9rem;border-top:2px solid var(--pink)}
#expertise-list strong{grid-column:1/8;font:800 clamp(1.25rem,2.4vw,2.2rem)/1.1 var(--display);letter-spacing:-.03em}
#expertise-list span{grid-column:8/13;font:500 1rem/1.4 var(--body)}
#expertise-list li[tabindex]:hover strong,#expertise-list li[tabindex]:focus strong{color:var(--pink)}
@media(hover:hover){#expertise-list span{opacity:0;transition:opacity .3s}#expertise-list li:hover span,#expertise-list li:focus span{opacity:1}}
@media(max-width:860px){#expertise-list li{display:block}#expertise-list span{display:block;margin-top:.3rem}.pics{grid-template-columns:1fr}.pics .frame:nth-child(n){grid-column:1}}

/* v3 */
.frame{position:relative;overflow:hidden;aspect-ratio:var(--ar);background:var(--pink-soft)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.ph{align-self:end}
.pics{align-items:end}.pics .frame:nth-child(1){grid-column:1/8}.pics .frame:nth-child(2){grid-column:8/13}
.hero-art{max-height:none;align-self:end}
.words span{position:absolute;left:var(--x0);top:var(--y0);font:800 clamp(1.1rem,2.6vw,2.6rem) var(--display);letter-spacing:-.02em;white-space:nowrap;transform-origin:left center}
.words span:not(.end){transform:translate(calc(var(--tx)*var(--p,1)),calc(var(--ty)*var(--p,1))) rotate(calc(var(--r)*(1 - var(--p,1))*1deg)) scale(calc(1 - var(--p,1)*.5));opacity:clamp(0,calc(1.6 - var(--p,1)*1.8),1)}
.words .end{left:0;top:auto;bottom:0;color:var(--pink);font-size:clamp(1.6rem,5.5vw,5.5rem);opacity:clamp(0,calc((var(--p,1) - .55)*3),1);transform:none}
/* v4 */
#sistema .stick>.wrap{width:100%}
.hero{align-content:center;align-items:start}
.hero-art{align-self:start;grid-row:1/3;margin-top:0}
@media(max-width:860px){.hero-art{grid-row:auto}}
@media(max-width:860px){.nav nav{display:contents}}
#metrics li:nth-child(3){grid-column:9/13}
.pics2{margin-top:1rem}
@media(min-width:861px){.pics2 .frame:nth-child(1){grid-column:1/6}.pics2 .frame:nth-child(2){grid-column:6/13}}

/* v5 movimento: só transform/opacity (clip-path apenas em desktop) */
#bar{position:fixed;top:0;left:0;right:0;height:2px;background:var(--pink);transform:scaleX(0);transform-origin:left;z-index:90;pointer-events:none}
.js [data-r]{transition-delay:var(--d,0ms)}
.js .frame img{transform:scale(1.1);opacity:0;transition:transform 1.4s var(--ease-out),opacity .8s}
.js .frame.in img{transform:none;opacity:1}
@keyframes lineIn{from{clip-path:inset(0 0 100% 0);transform:translateY(45%)}to{clip-path:inset(0);transform:none}}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js .hero h1 span{animation:lineIn 1.1s var(--ease-out) both}.js .hero h1 span:nth-child(2){animation-delay:.1s}.js .hero h1 span:nth-child(3){animation-delay:.2s}
.js .hero-art{animation:up .9s var(--ease-out) .15s both}.js .hero-copy{animation:up .9s var(--ease-out) .4s both}
#metrics b{contain:layout;font-variant-numeric:tabular-nums}
.words span{will-change:transform,opacity}
@media(hover:hover) and (min-width:861px){.js .frame img{clip-path:inset(0 0 100% 0);transition:transform 1.4s var(--ease-out),opacity .8s,clip-path 1.1s var(--ease-out)}.js .frame.in img{clip-path:inset(0)}}
@media(hover:none){.js [data-r]{transform:translateY(14px);transition-duration:.6s}.js .frame img{transform:none;transition:opacity .6s}}
@media(max-width:860px){
.words{height:46svh}.words span{font-size:1.25rem}
.words span:nth-child(n){--r:0!important}
.words span:nth-child(1){--x0:0%!important;--y0:0%!important;--tx:7.2vw!important;--ty:31.7svh!important}
.words span:nth-child(2){--x0:0%!important;--y0:16%!important;--tx:7.2vw!important;--ty:24.6svh!important}
.words span:nth-child(3){--x0:50%!important;--y0:0%!important;--tx:-37.8vw!important;--ty:31.7svh!important}
.words span:nth-child(4){--x0:0%!important;--y0:32%!important;--tx:7.2vw!important;--ty:17.6svh!important}
.words span:nth-child(5){--x0:25%!important;--y0:48%!important;--tx:-15.3vw!important;--ty:10.6svh!important}
.words span:nth-child(6){--x0:50%!important;--y0:32%!important;--tx:-37.8vw!important;--ty:17.6svh!important}
.words span:nth-child(7){--x0:50%!important;--y0:16%!important;--tx:-37.8vw!important;--ty:24.6svh!important}
.words .end{white-space:normal;line-height:.95;font-size:clamp(2.6rem,15vw,4.2rem)}}

/* v6 cases e família */
.family{max-width:36em;margin:var(--space-4) 0 var(--space-3)}
.cs .hero-case{padding-bottom:var(--space-4)}.cs h1{font-size:var(--fs-hero);max-width:18em}
.cs .meta{font-weight:600;margin-bottom:var(--space-3)}.cs .lead{margin-top:var(--space-3);font-size:clamp(1.15rem,1.7vw,1.5rem);max-width:32em}
.cs .frame.cover{margin-top:var(--space-4)}
.cs section.row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:2rem;padding-block:clamp(2.5rem,6vw,5rem);border-top:2px solid var(--pink)}
.cs section.row>h2{grid-column:1/5;font-size:clamp(1.2rem,1.8vw,1.6rem)}.cs section.row>div{grid-column:6/13}
.cs section.row p+p,.cs section.row ul,.cs section.row ol.list{margin-top:1rem}.cs .list{padding-left:1.2rem}.cs .list li{margin-top:.6rem}
.cs .flow{margin-top:1.75rem}
.res{list-style:none;padding:0}.res li{display:grid;grid-template-columns:repeat(12,1fr);column-gap:2rem;padding-block:1.1rem;align-items:baseline;border-top:1px solid var(--pink)}
.res b{grid-column:1/6;font:800 clamp(2.2rem,5vw,4.6rem)/1 var(--display);color:var(--pink);letter-spacing:-.04em}.res span{grid-column:6/13}
.cs .cta-case{padding-block:var(--space-section) var(--space-4)}.cs .cta-case h2{font-size:var(--fs-xl);max-width:14em}
.next{display:inline-block;margin-top:var(--space-3);font:800 clamp(1.4rem,3vw,2.6rem)/1.1 var(--display);letter-spacing:-.03em;text-decoration:none;border-bottom:3px solid var(--pink)}
@media(max-width:860px){.cs section.row,.res li{display:block}.cs section.row>h2{margin-bottom:1rem}.res b{display:block;margin-bottom:.3rem}}
.lang{white-space:nowrap}.lang a{margin-inline:.3rem}.hdr-r{display:flex;gap:1.5rem;align-items:center}
@media(max-width:860px){.hdr-r{gap:.75rem}.nav .lang a{padding-inline:.2rem}}