:root{--navy:#0A1647;--ink:#0B1030;--paper:#EEF1F7;--r:#E3262B;--y:#FDBE0F;--g:#0A9A4A;--b:#1747B8;--w:min(1180px,calc(100% - 48px));--d:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 1.0625rem/1.6 'Instrument Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
h1,h2,h3{font-family:var(--d);line-height:1.02;letter-spacing:-.03em;font-weight:800}
h2{font-size:clamp(2.2rem,4.6vw,4rem)}
.wrap{width:var(--w);margin-inline:auto}
:focus-visible{outline:3px solid var(--y);outline-offset:3px}

/* placeholder: mosaico de cores enquanto a imagem não é enviada */
.ph{display:block;width:100%;height:100%;min-height:200px;background:conic-gradient(var(--r) 25%,var(--y) 0 50%,var(--g) 0 75%,var(--b) 0) 0 0/72px 72px;opacity:.9}

.btn{display:inline-block;font:600 1rem/1 'Instrument Sans',sans-serif;background:var(--y);color:var(--navy);padding:1.1rem 1.7rem;border-radius:14px 14px 14px 4px;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 0 #b88a00}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 #b88a00}
.btn-sm{padding:.8rem 1.2rem;font-size:.95rem}
.btn-y{background:var(--y)}

.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px max(24px,calc((100% - 1180px)/2));transition:background .3s,padding .3s}
.top.s{background:rgba(10,22,71,.92);backdrop-filter:blur(10px);padding-block:10px}
.logo{display:inline-flex;align-items:center;gap:.6rem;font:800 1.35rem/1 var(--d);letter-spacing:-.02em;color:#fff;text-decoration:none}
.sq{display:grid;grid-template:1fr 1fr/1fr 1fr;gap:2px;width:22px;height:22px}
.sq i{border-radius:3px 3px 3px 1px}.sq i:nth-child(1){background:var(--r)}.sq i:nth-child(2){background:var(--y)}.sq i:nth-child(3){background:var(--b)}.sq i:nth-child(4){background:var(--g)}

/* hero */
.hero{position:relative;background:var(--navy);color:#fff;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:130px 0 150px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(3.2rem,8vw,7rem);margin-bottom:1.6rem}
.lead{font-size:1.3rem;max-width:22ch;color:#c9d2f0;margin-bottom:2.4rem}
.hero-pic{aspect-ratio:4/3;border-radius:36px 36px 140px 36px;overflow:hidden;box-shadow:-18px 18px 0 var(--r),-36px 36px 0 var(--y)}
.mosaic{position:absolute;inset:auto 0 0;display:flex;align-items:flex-end;gap:5px;height:84px;padding-inline:5px}
.mosaic i{flex:1;border-radius:10px 10px 0 0}
.mosaic i:nth-child(4n+1){background:var(--r)}.mosaic i:nth-child(4n+2){background:var(--y)}.mosaic i:nth-child(4n+3){background:var(--g)}.mosaic i:nth-child(4n){background:var(--b)}
.mosaic i:nth-child(3n){height:100%}.mosaic i:nth-child(3n+1){height:62%}.mosaic i:nth-child(3n+2){height:80%}
.js .mosaic i{transform:translateY(105%)}
.js .mosaic.on i{transform:none;transition:transform .8s cubic-bezier(.2,.9,.25,1) calc(var(--i)*60ms)}

/* sala */
.sala,.final{position:relative;background:var(--navy)}
.sala figure,.final figure{height:min(86vh,760px)}
.sala-box,.final-box{position:absolute;left:0;bottom:0;width:min(560px,100%);background:var(--navy);color:#fff;padding:clamp(28px,4vw,52px);border-radius:0 36px 0 0}
.sala .wrap,.final .wrap{position:absolute;inset:0}
.sala-box h2,.final-box h2{font-size:clamp(2rem,3.8vw,3.2rem);margin-bottom:1rem}
.sala-box p,.final-box p{color:#c9d2f0;margin-bottom:1.6rem}
.final-box p{margin-bottom:1.8rem}

/* seções */
.sec{padding:clamp(72px,10vw,140px) 0}
.paper{background:var(--paper)}.white{background:#fff}.navy{background:var(--navy);color:#fff}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split.rev{grid-template-columns:1fr 1.1fr}
.split.rev>figure{order:-1}
.big{font-size:1.3rem;line-height:1.5;margin-top:1.6rem;max-width:34ch}
.mute{margin-top:1.4rem;opacity:.7;max-width:40ch}
.note{margin-top:2rem;font-size:.9rem;opacity:.6;max-width:36ch}
.tall{aspect-ratio:4/5;border-radius:36px 120px 36px 36px;overflow:hidden}
.rev .tall{border-radius:120px 36px 36px 36px}
.wide{aspect-ratio:3/2;border-radius:36px 36px 120px 36px;overflow:hidden}
.narrow{max-width:16ch}
h2.narrow{max-width:15ch}

/* kit */
.kitlist{list-style:none;margin-top:2.2rem}
.kitlist li{display:flex;align-items:center;gap:1.1rem;padding:1.15rem 0;border-top:2px solid rgba(11,16,48,.12);font:600 1.35rem/1.2 var(--d);letter-spacing:-.01em}
.kitlist li:last-child{border-bottom:2px solid rgba(11,16,48,.12)}
.kitlist li:before{content:"";flex:none;width:26px;height:26px;border-radius:7px 7px 7px 2px;background:var(--c)}

/* experiências: mosaico */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(120px,15vw,190px);gap:10px;margin-top:3rem}
.t{display:flex;align-items:flex-end;padding:clamp(16px,2.2vw,28px);font:700 clamp(1.1rem,2.2vw,1.8rem)/1.05 var(--d);letter-spacing:-.02em;color:#fff;border-radius:22px 22px 22px 6px}
.t1{grid-column:span 3;grid-row:span 2;background:var(--b);font-size:clamp(1.6rem,3.6vw,3rem)}
.t2{grid-column:span 3;background:var(--y);color:var(--navy)}
.t3{grid-column:span 2;background:var(--r)}
.t4{grid-column:span 1;background:var(--navy)}
.t5{grid-column:span 3;background:var(--g)}
.t6{grid-column:span 3;background:var(--navy)}

/* plataforma */
.roles{margin-top:2.4rem}
.roles div{display:grid;grid-template-columns:14px 1fr;column-gap:1.2rem;padding:1.2rem 0}
.roles div:before{content:"";grid-row:span 2;background:var(--c);border-radius:6px}
.roles dt{font:800 1.8rem/1.1 var(--d);letter-spacing:-.02em;color:var(--c)}
.roles dd{opacity:.8}

/* etapas */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,32px);margin-top:3rem;align-items:start}
.stages figure{aspect-ratio:4/5}
.stages figure:nth-child(2){margin-top:56px}.stages figure:nth-child(3){margin-top:112px}
.stages figure{position:relative}
.stages figure>img,.stages figure>.ph{border-radius:28px;height:100%}
.stages figcaption{position:absolute;left:0;bottom:0;background:var(--paper);padding:.7rem 1.1rem .1rem 0;font:700 1.15rem/1.2 var(--d);border-radius:0 18px 0 0}
.stages+.mute{margin-top:150px}
.design .big{color:#c9d2f0}

/* passos (sequência real) */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,32px);margin-top:3rem}
.steps li{counter-increment:s;padding:2rem 1.8rem 2.2rem;background:#fff;border-radius:26px 26px 26px 6px}
.steps li:before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:12px 12px 12px 3px;font:800 1.3rem var(--d);color:#fff;margin-bottom:3rem}
.steps li:nth-child(1):before{background:var(--b)}.steps li:nth-child(2):before{background:var(--g)}.steps li:nth-child(3):before{background:var(--r)}
.steps h3{font-size:1.6rem;margin-bottom:.6rem}
.steps p{opacity:.75}

footer{background:var(--ink);color:#aab3d6;padding:44px 0;font-size:.9rem}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}

@media(max-width:860px){
 .hero{padding:110px 0 120px}.hero-grid,.split,.split.rev{grid-template-columns:1fr}
 .split.rev>figure{order:0}.hero-pic{box-shadow:-10px 10px 0 var(--r),-20px 20px 0 var(--y);margin:0 20px 20px 0}
 .sala figure,.final figure{height:60vh}.sala .wrap,.final .wrap{position:static;width:100%}
 .sala-box,.final-box{position:static;width:100%;border-radius:0}
 .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}.t,.t1,.t2,.t3,.t4,.t5,.t6{grid-column:span 1;grid-row:auto}.t1{grid-column:span 2;grid-row:span 2}
 .stages{grid-template-columns:1fr}.stages figure:nth-child(n){margin-top:0}.stages+.mute{margin-top:1.4rem}
 .steps{grid-template-columns:1fr}.top .btn-sm{padding:.7rem 1rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .mosaic i{transform:none!important;transition:none!important}.btn{transition:none}}