body[data-case=barra]>header{display:none}
body[data-case=barra]{background:#faf8f7}
#case12{display:none;--red:#e3131b;--ink:#141414;--bg:#faf8f7;--card:#fff;--mut:#5d5d5d;--line:#dcdcda;background:var(--bg);color:var(--ink);font:300 17px/1.55 Inter,Helvetica,Arial,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #case12{--bg:#101010;--card:#1b1b1b;--ink:#f2f2f2;--mut:#a3a3a3;--line:#333}}
:root[data-theme="dark"] #case12{--bg:#101010;--card:#1b1b1b;--ink:#f2f2f2;--mut:#a3a3a3;--line:#333}
body[data-case=barra] #case12{display:block}
#case12 .r{color:var(--red)}
#case12 .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
#case12 .hero{color:#fff;position:relative;overflow:hidden;padding:24px 0 96px;min-height:620px;background:#141414;font-family:Inter,Helvetica,Arial,sans-serif;display:block;align-items:stretch;flex-direction:unset}
#case12 .hero:before{content:"";position:absolute;inset:-24px;background:url(../img/bg-hero.jpg) right center/cover no-repeat;transform:translate3d(var(--px,0px),calc(var(--py,0px)*-1),0);will-change:transform;z-index:0}
#case12 .hero:after{content:"";position:absolute;inset:0;left:0;right:0;bottom:0;height:auto;background:linear-gradient(90deg,rgba(15,15,15,.94) 0%,rgba(15,15,15,.8) 38%,rgba(15,15,15,.1) 70%);z-index:0;pointer-events:none}
#case12 .hero .wrap{position:relative;z-index:2;width:100%;max-width:1080px;padding:0 24px}
#case12 .hero img{position:static;inset:auto;height:auto;width:auto;object-fit:unset;mask-image:none;-webkit-mask-image:none}
#case12 .logo{margin-bottom:56px;font-weight:400;letter-spacing:0}
#case12 .logo img{height:56px;width:auto;display:block;aspect-ratio:auto}
#case12 .hero h1{font-family:Inter,Helvetica,Arial,sans-serif;font-weight:800;letter-spacing:-.055em;line-height:1;font-size:clamp(48px,9vw,96px);max-width:10em;color:#fff}
#case12 .hero h1 span{display:inline;white-space:normal}
#case12 .hero p{max-width:30em;opacity:.85;margin:24px 0 0;color:#fff;font-size:clamp(18px,1.9vw,26px);font-weight:300;line-height:1.5}
#case12 .hero .tags{display:block;font-size:clamp(14px,1.3vw,18px);font-weight:300;opacity:.65;margin-top:28px;max-width:34em;letter-spacing:0;text-transform:none;color:#fff}
#case12 .hero .back{color:#fff;padding:8px 0 28px;position:relative;z-index:3}
#case12 .stats{--n:clamp(40px,4.6vw,64px);background:transparent;border-bottom:0;font-family:Inter,Helvetica,Arial,sans-serif;display:block}
#case12 .stats .wrap{display:grid;grid-template-columns:1fr 1.3fr 1.2fr 1fr;padding-top:52px;padding-bottom:52px;gap:0}
#case12 .stats .wrap>div{padding:4px 24px;border-left:1px solid var(--line)}
#case12 .stats .wrap>div:first-child{border-left:0;padding-left:0}
#case12 .num{display:block;font:300 var(--n)/1 Inter,Helvetica,Arial,sans-serif;letter-spacing:-.05em;white-space:nowrap;text-transform:uppercase;font-variant-numeric:tabular-nums;margin:0}
#case12 .num.s{font-size:calc(var(--n)*.8)}
#case12 .stats i{display:block;font:500 12px Inter,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--red);font-style:normal;margin-top:16px}
#case12 .stats i:after{content:"";display:block;width:18px;height:2px;background:var(--red);margin-top:14px}
#case12 .stats span{display:block;font-size:14px;line-height:1.45;color:var(--mut);margin-top:14px;max-width:15em}
#case12 section{padding:72px 0;border-bottom:0}
#case12 .head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:40px}
#case12 .head p{margin:0;color:var(--mut);max-width:30em}
#case12 h2{font-family:Inter,Helvetica,Arial,sans-serif;font-weight:800;letter-spacing:-.05em;line-height:1.02;font-size:clamp(36px,6vw,60px);margin:0;color:var(--ink)}
#case12 .icons{display:grid;grid-template-columns:repeat(7,1fr);gap:0}
#case12 .icons div{padding:20px 10px;text-align:center;font-size:15px;border-left:1px solid var(--line);color:var(--ink)}
#case12 .icons div:first-child{border-left:0}
#case12 .icons img{display:block;width:72px;height:72px;margin:0 auto 16px;aspect-ratio:auto;object-fit:contain}
#case12 .photo{display:block;width:100%;height:clamp(260px,42vw,560px);object-fit:cover;object-position:center 40%;position:static}
#case12 .posts{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
#case12 .post{aspect-ratio:9/16;border-radius:14px;background:var(--red);color:#fff;padding:0;font:500 24px/1.1 Inter,sans-serif;display:block;position:relative;text-decoration:none;overflow:hidden;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s}
#case12 .post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#case12 .post:after{content:"↗";position:absolute;top:14px;right:16px;font:400 22px Inter,Arial,sans-serif;opacity:.85;z-index:2;color:#fff}
#case12 .post:hover{transform:translateY(-6px) scale(1.03)}
#case12 .post.w{background:var(--card);color:var(--red);border:1px solid var(--line)}
#case12 .post:before{content:"Ver peça ↗";position:absolute;left:18px;bottom:16px;font:600 11px Inter,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;z-index:2;color:#fff}
#case12 .post:after{transition:opacity .2s}
#case12 .post:hover:before,#case12 .post:focus-visible:before{opacity:1;transform:none}
#case12 .post:hover:after{opacity:0}
#case12 .grid2{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:center}
#case12 .ev{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#case12 .ev img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;position:static;height:auto}
#case12 .fora{padding:44px 0}
#case12 .fora .grid2{grid-template-columns:1.15fr 1fr;gap:32px}
#case12 .intro{padding-bottom:28px;border-bottom:0}
#case12 .intro .head{margin-bottom:0}
#case12 .ticker{background:var(--red);color:#fff;overflow:hidden;height:90px;display:flex;align-items:center;margin:0 0 54px}
#case12 .tt{display:flex;width:max-content;animation:bg-tick 40s linear infinite;will-change:transform}
#case12 .tg{display:flex;align-items:center;flex:none}
#case12 .tg span{font:500 19px Inter,Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
#case12 .tg em{font:300 26px Inter,Helvetica,Arial,sans-serif;font-style:normal;margin:0 44px}
@keyframes bg-tick{to{transform:translate3d(-25%,0,0)}}
@media(max-width:820px){
#case12 .hero{display:block;min-height:620px;padding:24px 0 96px}
#case12 .hero:before{display:block}
#case12 .hero .wrap{margin-top:0;padding:0 24px}
}
@media(max-width:760px){
#case12 .fora .grid2{grid-template-columns:1fr}
#case12 .stats .wrap{grid-template-columns:1fr 1fr;padding-top:32px;padding-bottom:32px}
#case12 .stats{--n:clamp(40px,12vw,60px)}
#case12 .stats .wrap>div{padding:28px 16px}
#case12 .stats .wrap>div:nth-child(odd){border-left:0;padding-left:0}
#case12 .stats .wrap>div:nth-child(n+3){border-top:1px solid var(--line)}
#case12 .stats span{margin-top:14px}
#case12 .head,#case12 .grid2{grid-template-columns:1fr}
#case12 .icons{grid-template-columns:repeat(2,1fr)}
#case12 .icons div:nth-child(odd){border-left:0}
#case12 .posts{display:flex;overflow-x:auto;gap:12px}
#case12 .post{flex:0 0 55%}
#case12 .hero:before{background-position:72% center}
#case12 .hero:after{background:linear-gradient(180deg,rgba(15,15,15,.88),rgba(15,15,15,.55))}
#case12 .ticker{height:72px}
#case12 .tg span{font-size:16px}
#case12 .tg em{margin:0 30px}
#case12 .tt{animation-duration:32s}
#case12 .head.hx{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
#case12 .tt{animation:none}
#case12 .tg:nth-child(n+2){display:none}
#case12 .ticker{overflow-x:auto}
}
#case12 .head.hx{grid-template-columns:1.3fr .8fr;align-items:center}
#case12 .big{font:800 clamp(38px,6vw,76px)/.98 Inter,Helvetica,Arial,sans-serif;letter-spacing:-.055em;max-width:9.5em}
#case12 .head.hx p{font-size:17px;line-height:1.65}
#case12 .res .head{grid-template-columns:1.3fr .7fr;align-items:center;margin-bottom:56px}
#case12 .res h2{font-weight:600;letter-spacing:-.045em;line-height:1.02}
#case12 .res .head p{font-size:18px;line-height:1.55}
#case12 .kpis{display:grid;grid-template-columns:repeat(4,1fr)}
#case12 .kpis div{padding:2px 0 2px 36px;border-left:1px solid var(--line)}
#case12 .kpis div:first-child{border-left:0;padding-left:0}
#case12 .kpis img{display:block;height:40px;width:auto;margin-bottom:28px;aspect-ratio:auto}
#case12 .kpis b{display:block;font:700 22px/1.2 Inter,Helvetica,Arial,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
#case12 .kpis span{display:block;color:var(--mut);font-size:17px;line-height:1.4;margin-top:6px}
@media(max-width:760px){
#case12 .res .head{grid-template-columns:1fr;margin-bottom:36px}
#case12 .kpis{grid-template-columns:1fr 1fr}
#case12 .kpis div{padding-left:20px}
#case12 .kpis div:nth-child(odd){border-left:0;padding-left:0}
#case12 .kpis div:nth-child(n+3){margin-top:32px}
#case12 .kpis b{font-size:19px}
#case12 .kpis span{font-size:15px}
}
#case12 .end{--ink:#141414;--mut:#5d5d5d;--line:#dcdcda;position:relative;overflow:hidden;background:#faf8f7;color:#141414;padding:110px 0 120px;min-height:560px;display:flex;align-items:center}
#case12 .end:before{content:"";position:absolute;top:0;right:0;bottom:0;width:min(30%,430px);background:url(../img/bg-end.jpg) right center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
#case12 .end .wrap{position:relative;z-index:1;width:100%;text-align:center}
#case12 .end h2{font-size:clamp(38px,5vw,66px);font-weight:800;letter-spacing:-.055em;line-height:1;max-width:10.6em;margin:0 auto;color:#141414}
#case12 .end .tl{margin:40px auto 0;font:400 12px/1.9 Inter,Helvetica,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);max-width:52em}
@media(max-width:900px){
#case12 .end{padding:72px 0 300px;min-height:0;align-items:flex-start}
#case12 .end:before{top:auto;width:100%;height:300px;background-position:right bottom;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 35%);mask-image:linear-gradient(180deg,transparent 0,#000 35%)}
#case12 .end .tl{font-size:11px;margin-top:32px}
}
@keyframes bg-cur{to{opacity:0;visibility:hidden}}
@keyframes bg-fi{from{opacity:0}to{opacity:1}}
@keyframes bg-up{from{opacity:0;transform:translateY(14px)}to{opacity:var(--o,1);transform:none}}
@keyframes bg-bar{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}50.01%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes bg-rvt{to{opacity:1}}
@keyframes bg-sw{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
#case12 .hero p{--o:.85}
#case12 .hero .tags{--o:.65}
#case12.bg-js .hero .curtain{position:absolute;inset:0;background:#0a0a0a;z-index:1;pointer-events:none;animation:bg-cur 1.2s .15s ease forwards}
#case12.bg-js .hero .logo{animation:bg-up .8s .7s cubic-bezier(.2,.7,.2,1) both}
#case12.bg-js .hero .l1{animation:bg-fi .8s 1.1s ease both}
#case12.bg-js .hero .rv{display:inline-block;position:relative;opacity:0;animation:bg-rvt 0s 2s forwards}
#case12.bg-js .hero .rv:after{content:"";position:absolute;top:.1em;bottom:.04em;left:-.03em;right:-.03em;background:#ff4a4a;transform:scaleX(0);animation:bg-bar 1s 1.5s cubic-bezier(.7,0,.2,1) forwards}
#case12.bg-js .hero p,#case12.bg-js .hero .tags{animation:bg-up .8s 2.3s cubic-bezier(.2,.7,.2,1) both}
@media(max-width:480px){#case12 .hero h1{font-size:42px}}
#case12.bg-js .head:not(.in){opacity:0;transform:translateY(20px)}
#case12.bg-js .head{transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
#case12.bg-js :is(.icons,.kpis):not(.in)>div,#case12.bg-js .stats:not(.in) .wrap>div{opacity:0;transform:translateY(16px)}
#case12.bg-js :is(.icons,.kpis)>div,#case12.bg-js .stats .wrap>div{transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
#case12.bg-js .num .ch{display:inline-block;transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
#case12.bg-js .stats:not(.in) .num .ch{opacity:0;transform:translateY(.4em)}
#case12.bg-js .posts:not(.in)>a{opacity:0;transform:translateY(18px)}
#case12 .posts.done>a{transition:transform .25s ease,opacity .25s}
#case12.bg-js .ev img{clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
#case12.bg-js .ev:not(.in) img{clip-path:inset(0 100% 0 0)}
@media(hover:hover){#case12 .kpis img{filter:grayscale(1);opacity:.5;transition:filter .3s,opacity .3s,transform .3s}#case12 .kpis div:hover img{filter:none;opacity:1;transform:translateY(-3px)}}
#case12.bg-js .tg span{opacity:.45;transition:opacity .6s}
#case12.bg-js .tg span.on{opacity:1}
#case12 .sweep{position:relative;height:1px;margin-bottom:-1px;z-index:5;pointer-events:none}
#case12 .sweep:before{content:"";position:absolute;left:0;right:0;top:0;height:min(22vh,160px);background:var(--red);transform:scaleX(0);transform-origin:left}
#case12.bg-js .sweep.in:before{animation:bg-sw 1.5s cubic-bezier(.7,0,.2,1) forwards}
#case12 .end:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 78% 55%,rgba(227,19,27,.5),transparent 62%),linear-gradient(180deg,transparent 30%,rgba(227,19,27,.2));opacity:var(--rp,0);pointer-events:none;z-index:0}
@media(prefers-reduced-motion:reduce){
#case12.bg-js .hero .curtain,#case12.bg-js .hero .logo,#case12.bg-js .hero .l1,#case12.bg-js .hero .rv,#case12.bg-js .hero p,#case12.bg-js .hero .tags{animation:none;opacity:1}
#case12.bg-js .head:not(.in),#case12.bg-js :is(.icons,.kpis):not(.in)>div,#case12.bg-js .stats:not(.in) .wrap>div,#case12.bg-js .posts:not(.in)>a{opacity:1;transform:none}
#case12.bg-js .ev:not(.in) img{clip-path:none}
}