:root{--bg:#080313;--ink:#fbf9ff;--ink-dark:#16111d;--muted:#d6cfee;--violet:#8a57ff;--violet2:#c889ff;--blue:#5f6dff;--pad:clamp(20px,3.8vw,62px);--max:1380px}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif;line-height:1.45;overflow-x:hidden}

img{display:block;max-width:100%}

a{color:inherit;text-decoration:none}

.container{width:min(100%,var(--max));margin:0 auto;padding-inline:var(--pad)}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.skip-link{position:fixed;left:16px;top:16px;z-index:999;background:#fff;color:#111;padding:10px 14px;border-radius:999px;transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}

.header{position:fixed;inset:0 0 auto;height:70px;z-index:90;background:rgba(250,246,243,.95);backdrop-filter:blur(16px);border-bottom:1px solid rgba(17,11,31,.08);color:var(--ink-dark)}

.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:22px}
.logo{height:28px;width:auto;object-fit:contain}

.navlinks{display:flex;gap:32px;align-items:center}
.navlinks a{font-size:10px;letter-spacing:.16em;text-transform:uppercase;position:relative}
.navlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:linear-gradient(90deg,var(--violet),var(--blue));transition:right .22s}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{right:0}

.project{position:relative;min-height:calc(100svh - 48px);overflow:hidden;padding:clamp(102px,8vw,122px) 0 clamp(40px,4vw,58px);background:radial-gradient(circle at 82% 20%,rgba(136,76,255,.3),transparent 34%),radial-gradient(circle at 12% 88%,rgba(198,81,255,.16),transparent 36%),linear-gradient(145deg,#080313 0%,#17082d 58%,#0a0316 100%)}

.project::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(202,144,255,.18) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(90deg,transparent 18%,black);opacity:.25;pointer-events:none}

.project-inner{position:relative;z-index:1;padding-left:clamp(110px,9vw,150px)}

.back-row{position:fixed;left:0;top:50%;z-index:30;width:88px;min-height:250px;margin:0;padding:14px 10px;display:flex;align-items:center;justify-content:center;transform:translateY(-50%);overflow:hidden;border-radius:0 30px 30px 0;background:rgba(250,247,252,.97);color:#191020;box-shadow:0 24px 70px rgba(5,0,18,.32);backdrop-filter:blur(14px)}
.back-row::before{content:'';position:absolute;inset:0;background:linear-gradient(#8a57ff,#8a57ff) 4px 18px/34px 34px no-repeat,linear-gradient(#efe7f7,#efe7f7) 56px 58px/30px 30px no-repeat,linear-gradient(rgba(138,87,255,.16),rgba(138,87,255,.16)) 0 103px/28px 28px no-repeat,linear-gradient(#cc81ff,#cc81ff) 10px 181px/34px 34px no-repeat,linear-gradient(#dffaff,#dffaff) 56px 211px/38px 38px no-repeat,linear-gradient(rgba(201,137,255,.24),rgba(201,137,255,.24)) 64px 144px/23px 23px no-repeat;opacity:.98}

.back-btn{position:relative;z-index:2;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#21102e;color:#fff;box-shadow:0 12px 30px rgba(33,16,46,.24);transition:background .2s,transform .2s}
.back-btn::before{content:'';position:absolute;left:12px;top:19px;width:23px;height:6px;border-radius:4px;background:#fff}
.back-btn::after{content:'';position:absolute;left:11px;top:13px;width:11px;height:11px;border-left:6px solid #fff;border-bottom:6px solid #fff;transform:rotate(45deg)}
.back-btn:hover{background:#7447d9;transform:translateX(-4px)}

.project-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);gap:clamp(48px,5vw,76px);align-items:center}

.project-copy{max-width:680px}
.work-type{margin:0 0 13px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#d0a5ff;font-weight:800;transform:translateX(3px)}
.work-title{margin:0;font-size:clamp(42px,4.5vw,68px);line-height:.94;letter-spacing:-.055em;text-wrap:balance}
.work-title em{font-style:normal;background:linear-gradient(105deg,#fff 0%,#d88bff 50%,#76dfff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.work-intro{margin:20px 0 0;max-width:51ch;color:#ddd4ed;font-size:clamp(14px,1.2vw,18px);line-height:1.52}

.facts{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.16)}
.fact{padding:18px 14px 0 0}
.fact+.fact{border-left:1px solid rgba(255,255,255,.16);padding-left:18px}
.fact strong{display:block;font-size:clamp(24px,2.15vw,32px);line-height:1;letter-spacing:-.04em}
.fact span{display:block;margin-top:8px;color:#cfc5dc;font-family:Georgia,'Times New Roman',serif;font-size:12px;line-height:1.3}

.project-media{width:100%;max-width:520px;justify-self:end;display:flex;flex-direction:column}
.watch-label{margin:8px 0 0;text-align:center;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.project-note{width:104%;align-self:center;margin-top:16px;padding:16px 18px 17px;background:linear-gradient(135deg,rgba(58,25,88,.64),rgba(27,10,49,.76));border-left:1px solid rgba(176,111,255,.54);box-shadow:0 18px 44px rgba(0,0,0,.16)}
.project-note h2{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(16px,1.45vw,20px);font-weight:400;line-height:1.12;color:#fff}
.project-note p{margin:8px 0 0;max-width:52ch;color:#cfc6dd;font-size:12px;line-height:1.48}

.project-visuals{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:18px;width:100%;aspect-ratio:1.48/1;min-height:0;padding:12px;overflow:hidden;border:1px solid rgba(138,87,255,.72);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.018),rgba(122,65,197,.055));box-shadow:0 28px 74px rgba(0,0,0,.23)}
.project-visuals::after{content:'';position:absolute;left:50%;top:10px;bottom:10px;width:1px;transform:translateX(-50%);background:rgba(138,87,255,.3);pointer-events:none}
.visual{position:relative;z-index:1;display:block;width:100%;height:100%;min-width:0;margin:0;overflow:hidden;border:0;border-radius:10px;background:transparent;box-shadow:none}
.visual:first-child,.visual:nth-child(2){inset:auto;width:100%;height:100%;z-index:1;background:transparent;border:0;box-shadow:none}
.visual img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.visual.contain img{object-fit:cover;background:transparent}
.visual.portrait img{object-position:center 32%}
.visual.lower img{object-position:center 58%}
.visual.center img{object-position:center}
.visual.top img{object-position:center top}
.visual.video::after{content:'';position:absolute;left:50%;top:50%;z-index:2;width:34px;height:34px;transform:translate(-50%,-50%);background:#fff;filter:drop-shadow(0 7px 14px rgba(8,3,19,.22));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='white' fill-rule='evenodd' d='M32 0A32 32 0 1 1 31.999 0ZM22 18 22 46 44 32Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='white' fill-rule='evenodd' d='M32 0A32 32 0 1 1 31.999 0ZM22 18 22 46 44 32Z'/%3E%3C/svg%3E") center/contain no-repeat}
.visual.report::after{content:'↗';position:absolute;left:50%;top:50%;z-index:2;width:70px;height:70px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:#fff;color:#21102e;font-size:34px;font-weight:800;line-height:1;filter:drop-shadow(0 9px 20px rgba(8,3,19,.28))}
.visual.video::before{content:none}

.footer{padding:20px 0;background:var(--bg);border-top:1px solid rgba(255,255,255,.08)}
.footer-inner{text-align:center}
.footer small{color:var(--muted);font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif;font-size:10px;font-style:normal;letter-spacing:.11em}

@media(max-width:880px){.project-inner{padding-left:var(--pad)}
.back-row{position:relative;left:auto;top:auto;width:100%;min-height:96px;margin:0 0 42px;padding:14px 22px;transform:none;border-radius:24px}
.back-row::before{background:linear-gradient(#8a57ff,#8a57ff) 18px 18px/52px 52px no-repeat,linear-gradient(#efe7f7,#efe7f7) 24% 5px/34px 34px no-repeat,linear-gradient(#cc81ff,#cc81ff) 75% 49px/42px 42px no-repeat,linear-gradient(#dffaff,#dffaff) calc(100% - 18px) 15px/56px 56px no-repeat}
.back-btn{width:48px;height:48px}
.back-btn::before{left:13px;top:21px;width:25px}
.back-btn::after{left:12px;top:15px}
.project-layout{grid-template-columns:1fr;gap:44px}
.project-copy{max-width:720px}
.project-media{width:min(100%,680px);max-width:none;justify-self:center}
.project-note{width:100%}
}

@media(max-width:720px){.nav{justify-content:center}
.navlinks{display:none}
.logo{height:27px}
.project{padding-top:98px}
.back-row{min-height:90px;margin-bottom:38px}
.work-title{font-size:44px}
.facts{grid-template-columns:1fr}
.fact{padding:15px 0}
.fact+.fact{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-left:0}
.project-visuals{gap:14px;padding:10px;border-radius:14px}
.project-visuals::after{top:8px;bottom:8px}
.visual,.visual img{border-radius:8px}
.visual.video::after{width:30px;height:30px}
.project-note{padding:15px 16px}
.watch-label{font-size:9px}
}


/* V16: solução C aprovada — plays maiores, sem etiqueta adicional. */
.visual.video::after{width:70px;height:70px;filter:drop-shadow(0 9px 20px rgba(8,3,19,.28))}

@media(max-width:720px){.visual.video::after{width:56px;height:56px}
.visual.report::after{width:56px;height:56px;font-size:28px}
}


/* V17: composição C completa — ação nos plays e legenda editorial direta. */
.watch-label{display:none}

.project-note{width:100%;align-self:stretch;margin-top:24px;padding:0 0 0 13px;background:none;border-left:2px solid #8950ef;box-shadow:none}

.project-note h2{display:none}

.project-note p{margin:0;max-width:none;color:#ded5eb;font-size:12px;line-height:1.48}

@media(max-width:720px){.project-note{margin-top:18px;padding:0 0 0 12px}
}


/* V18: centralização vertical e faixa de métricas reconstruída em grid. */
@media(min-width:881px){
  .project{display:flex;align-items:center}

  .project-inner{width:min(100%,var(--max))}

}

.facts{margin-top:38px;align-items:stretch}

.fact{min-width:0;min-height:116px;padding:22px 22px 0 0;display:grid;grid-template-rows:62px auto;align-content:start}

.fact+.fact{padding-left:22px}

.fact strong{align-self:end;font-size:clamp(46px,3.8vw,60px);line-height:.88;letter-spacing:-.055em;white-space:nowrap}

.fact strong.compact{font-size:clamp(46px,3.8vw,60px);line-height:.88;letter-spacing:-.055em}

.fact span{margin-top:13px;line-height:1.25}

@media(max-width:880px){.project{display:block}
}

@media(max-width:720px){
  .facts{margin-top:32px}

  .fact{min-height:0;display:block;padding:18px 0}

  .fact+.fact{padding-left:0}

  .fact strong{font-size:46px;white-space:normal}

  .fact strong.compact{font-size:46px}

  .fact span{margin-top:9px}

}