@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Archivo Black";src:url(fonts/archivo-black.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Instrument";src:url(../fonts/instrument-italic.woff2) format("woff2");font-style:italic;font-display:swap}
:root{--navy:#0a1428;--bk:#060a14;--paper:#f3efe6;--sand:#c9a96a;--mute:rgba(243,239,230,.76);--line:rgba(243,239,230,.2);--ease:cubic-bezier(.22,1,.36,1);--g:clamp(16px,3vw,40px);--gp:clamp(8px,1vw,14px);--p:0;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-snap-type:y proximity;background:var(--bk)}
body{margin:0;background:var(--bk);color:var(--paper);font:400 16px/1.5 "Archivo",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,p,ul{margin:0;padding:0}:focus-visible{outline:2px solid var(--sand);outline-offset:3px;border-radius:4px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--paper);color:var(--navy);padding:10px 16px;border-radius:8px;font-weight:700}.skip:focus{top:12px}

.hd{position:absolute;inset:0 0 auto;z-index:5;opacity:calc(1 - var(--p)*2);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--g);pointer-events:none}.hd a{pointer-events:auto}
.wm{font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;gap:14px}
.wm em{font:italic 400 17px/1 "Instrument",serif;letter-spacing:0;text-transform:none;color:var(--paper)}
.nv{display:flex;gap:clamp(16px,2.4vw,32px)}.nv a{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;position:relative}
.nv a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}.nv a:hover::after{transform:scaleX(1)}

/* Hero: centro calmo com duas colunas de sites; laterais de vidro grosso que se dissolvem na borda. */
.rev{position:sticky;top:0;z-index:1;height:100svh;min-height:600px;overflow:hidden;background:var(--bk);scroll-snap-align:start}
.wall{position:absolute;inset:0;display:grid;grid-template-columns:30fr 20fr 20fr 30fr;gap:var(--gp);transform:scale(calc(1 + var(--p)*.08));animation:vl 1.8s var(--ease) both}
.cl{display:flex;flex-direction:column;gap:var(--gp);padding-bottom:var(--gp);animation:up 120s linear infinite}
.cl:nth-child(even){animation-direction:reverse}
.cl img{flex:none;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:top;border-radius:8px}
.off .cl{animation-play-state:paused}
@keyframes up{to{transform:translateY(-50%)}}
.rev::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,20,.6),rgba(6,10,20,.14) 24%,rgba(6,10,20,.14) 70%,rgba(6,10,20,.7));pointer-events:none}
.gl{position:absolute;z-index:1;top:0;bottom:0;width:34%;--glass:rgba(8,14,28,.88);background:var(--glass);-webkit-backdrop-filter:blur(48px) saturate(1.5);backdrop-filter:blur(48px) saturate(1.5);animation:gl 1.5s var(--ease) both}
.gl.l{left:0;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);transform:translateX(calc(var(--p)*-100%));--f:-100%}
.gl.r{right:0;-webkit-mask-image:linear-gradient(270deg,#000 82%,transparent);mask-image:linear-gradient(270deg,#000 82%,transparent);transform:translateX(calc(var(--p)*100%));--f:100%}
@keyframes gl{from{translate:var(--f) 0}to{translate:0 0}}
.rtx{position:absolute;z-index:4;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto;column-gap:48%;row-gap:18px;padding:0 var(--g) clamp(28px,6vh,56px);pointer-events:none;opacity:calc(1 - var(--p)*2)}
.rtx a{pointer-events:auto}
.hl{grid-row:2;grid-column:1;font:400 clamp(22px,2.95vw,56px)/1.06 "Archivo Black","Archivo",sans-serif;letter-spacing:-.005em;text-transform:uppercase;color:var(--paper)}
.hl.b{grid-column:2;text-align:right}.hl.b em{font-style:normal;color:var(--sand)}
.hl span{display:block;animation:ln 1.2s var(--ease) both}
.hl span:nth-child(2){animation-delay:.1s}.hl span:nth-child(3){animation-delay:.2s}.hl span:nth-child(4){animation-delay:.3s}
.hl.b span{animation-delay:.42s}.hl.b span:nth-child(2){animation-delay:.52s}.hl.b span:nth-child(3){animation-delay:.62s}.hl.b span:nth-child(4){animation-delay:.72s}
.sb{grid-row:3;grid-column:1;font-size:clamp(14px,1.15vw,17px);line-height:1.45;color:var(--paper);animation:ln 1.2s .85s var(--ease) both}
.cts{grid-row:3;grid-column:2;display:flex;flex-direction:column;align-items:flex-end;gap:8px;animation:ln 1.2s .95s var(--ease) both}
.ca,.cb{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:99px;font-weight:700;font-size:15px;white-space:nowrap;transition:transform .4s var(--ease),background .3s,color .3s}
.ca{background:var(--sand);color:var(--navy)}.ca:hover{transform:translateY(-2px);background:var(--paper)}
.cb{border:1px solid var(--line);color:var(--paper)}.cb:hover{background:var(--paper);color:var(--navy)}
@keyframes vl{from{opacity:0}to{opacity:1}}
@keyframes ln{from{opacity:0;filter:blur(12px);transform:translateY(14px)}to{opacity:1;filter:none;transform:none}}

/* Galeria: abas de um lado, um site em destaque, vizinhos flutuando dos dois lados. */
.gal{position:relative;z-index:2;height:100svh;min-height:600px;display:grid;grid-template-columns:clamp(190px,19vw,270px) minmax(0,1fr);gap:clamp(16px,3vw,44px);background:var(--bk);overflow:hidden;scroll-snap-align:start;padding:clamp(20px,4vh,36px) var(--g)}
.gh{align-self:center;display:flex;flex-direction:column;gap:clamp(16px,3vh,28px)}
.gh h2{font:italic 400 clamp(32px,3vw,44px)/1 "Instrument",serif}
.tabs{display:flex;flex-direction:column}
.tb{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 4px 0 14px;font-size:15px;font-weight:500;color:var(--mute);text-align:left;box-shadow:inset 1px 0 0 var(--line);transition:color .3s,box-shadow .3s}
.tb small{font-size:12px;font-variant-numeric:tabular-nums;color:var(--mute)}
.tb:hover{color:var(--paper)}.tb[aria-pressed=true]{color:var(--paper);font-weight:700;box-shadow:inset 2px 0 0 var(--sand)}
.ops{display:flex;flex-direction:column;padding:2px 0 8px}
.op{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 4px 0 28px;font-size:14px;color:var(--mute);text-align:left;box-shadow:inset 1px 0 0 var(--line);transition:color .3s}
.op small{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums}.op:hover,.op[aria-pressed=true]{color:var(--paper)}.op[aria-pressed=true]{font-weight:700}.op[aria-pressed=true]::before{content:"";flex:none;width:6px;height:6px;margin:0 -4px 0 -14px;border-radius:50%;background:var(--sand)}.op span{flex:1}
.view{min-width:0;min-height:0;display:flex;flex-direction:column;gap:clamp(10px,2vh,18px)}
.st{flex:1;min-height:0;display:flex;gap:var(--gp);overflow-x:auto;transition:opacity .28s}.st.sw{opacity:0}
.cd{position:relative;display:block;flex:none;height:100%;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:#111a2e}
.cd[hidden]{display:none}
.cd img{width:100%;height:100%;object-fit:cover;object-position:top;-webkit-user-drag:none}
.bar{display:none}
.js .st{position:relative;display:block;overflow:hidden;container-type:size;touch-action:pan-y;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.js .cd{--h:min(100cqh,118cqw);position:absolute;left:50%;top:50%;height:var(--h);translate:-50% -50%;z-index:calc(5 - var(--a,0));transform:translateX(calc(var(--o,0)*var(--h)*.65)) scale(calc(1 - var(--a,0)*.14));opacity:calc(1 - var(--a,0)*.42);transition:transform .9s var(--ease),opacity .6s}
.js .cd.far{pointer-events:none}
@media (hover:hover){.js .cd:not(.now):hover{opacity:.9}}
.js .bar{display:flex;align-items:center;justify-content:space-between;gap:12px clamp(12px,2vw,28px);flex-wrap:wrap}
.who{min-width:0;flex:1 1 160px}.who b{display:block;font:italic 400 clamp(22px,2vw,28px)/1.1 "Instrument",serif}.who small{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.ctl{display:flex;align-items:center;gap:2px}
.ctl button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;transition:background .3s}.ctl button:hover{background:rgba(243,239,230,.12)}
.ctl button[hidden],.ctl span[hidden]{display:none}.ctl svg{width:18px;height:18px}
.ctl span{min-width:58px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;color:var(--mute)}
.pl .i-pause,.pl[data-on] .i-play{display:none}.pl[data-on] .i-pause{display:block}

/* Fim: sobre e contato numa tela só. */
.end{position:relative;z-index:2;background:var(--navy);padding:clamp(56px,9vh,96px) var(--g) 18px;scroll-snap-align:end;display:flex;flex-direction:column;gap:clamp(32px,6vh,56px)}
.end h2{font:400 clamp(30px,5vw,80px)/1.02 "Archivo Black","Archivo",sans-serif;text-transform:uppercase;max-width:15em}.end h2 em{font-style:normal;color:var(--sand)}
.me{display:grid;grid-template-columns:auto minmax(0,560px) 1fr;gap:clamp(16px,2.4vw,32px);align-items:center}
.me img{width:76px;height:76px;border-radius:50%;object-fit:cover}.me p{color:var(--mute);font-size:clamp(15px,1.25vw,18px)}.me .ca{justify-self:end}
.ft{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 28px;border-top:1px solid var(--line);padding-top:10px;font-size:13px;color:var(--mute)}.ft a{text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:6px 0;margin-right:16px}.ft p{padding:6px 0}

@media (max-width:760px){
.wm em{display:none}.hd{flex-wrap:wrap;gap:0 16px;padding-bottom:0}.nv{flex:1 0 100%;justify-content:space-between;gap:8px}.nv a{font-size:11px;letter-spacing:.08em}
.rev{display:flex;flex-direction:column;min-height:640px}
.gl{display:none}
.wall{grid-template-columns:repeat(2,1fr);padding:0 var(--gp)}.cl:nth-child(n+3){display:none}
.rtx{position:relative;inset:auto;display:block;flex:none;padding:62px var(--g) 22px;opacity:1}
/* No celular o vidro fica atrás do texto e se dissolve embaixo, sem linha dura. */
.rtx::before{content:"";position:absolute;inset:0 0 -64px;z-index:-1;background:rgba(8,14,28,.86);-webkit-backdrop-filter:blur(32px) saturate(1.4);backdrop-filter:blur(32px) saturate(1.4);-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent)}
.hl{font-size:clamp(25px,7.6vw,42px)}.hl span{display:inline}.hl.b{text-align:left}
.sb{margin:12px 0 14px;font-size:15px}.cts{flex-direction:row;align-items:stretch}.ca,.cb{flex:1;padding:0 10px;font-size:14px}
.gal{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px;padding:14px 0 10px}
.gh{gap:6px;padding:0 var(--g)}.gh h2{font-size:28px}
.tabs{flex-flow:row wrap;gap:0 4px}
.tb{flex:1 1 auto;justify-content:center;gap:6px;padding:0 8px;box-shadow:inset 0 -1px 0 var(--line)}.tb[aria-pressed=true]{box-shadow:inset 0 -2px 0 var(--sand)}
.ops{order:1;flex:0 0 calc(100% + var(--g)*2);flex-direction:row;gap:4px;padding:0 var(--g);margin:0 calc(var(--g)*-1);overflow-x:auto;scrollbar-width:none}.ops::-webkit-scrollbar{display:none}
.op{flex:none;min-height:44px;padding:0 10px;gap:6px;box-shadow:none}.op small{margin-left:0}.op[aria-pressed=true]::before{margin:0}
.view{gap:8px}.js .bar{padding:0 var(--g)}.who{flex-basis:100%}.js .bar .ca{flex:1}
.me{grid-template-columns:auto 1fr}.me .ca{grid-column:1/-1;justify-self:stretch}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}.wall,.gl,.cl,.hl span,.sb,.cts{animation:none}.st,.js .cd{transition:none}.pl{display:none!important}}
@media (prefers-reduced-transparency:reduce){.gl,.rtx::before{background:var(--navy);-webkit-backdrop-filter:none;backdrop-filter:none}}