/* ██████████████████████████████████████████████████████████████████████████
   PAINEL DE AJUSTES — é aqui que você mexe. Só nesta caixa.
   Cada linha diz o que faz. Salve o arquivo e recarregue a página.
   ██████████████████████████████████████████████████████████████████████████ */
:root{

  /* LARGURA MÁXIMA DO SITE (só no computador).
     O conteúdo para de esticar aqui e fica centralizado, com borda dos dois lados.
     Mais estreito / mais centrado: 1200px   ·   Mais largo: 1680px
     Ocupar a tela toda de novo: 100%                                        */
  --largura-max: 100%;
  /* COR DA FAIXA DAS LATERAIS (o que aparece fora do site, no monitor grande) */
  --fundo-fora: #000000;

  /* TAMANHO DO MENU DO TOPO (PIVOT · WORK · CLIENTS · CONTACT).
     Menor: 10px   ·   Maior: 14px                                          */
  --texto-topo: 11px;

  /* TAMANHO DO TÍTULO GRANDE DO TOPO ("PIVOT POST-PRODUCTION").
     Menor: clamp(32px, 6vw, 76px)   ·   Maior: clamp(46px, 10.5vw, 140px)   */
  --titulo-hero: clamp(36px, 7vw, 92px);

  /* AFASTAMENTO DAS LATERAIS — o "respiro" entre o conteúdo e a borda da tela.
     É isso que deixa o texto e os cards longe do canto, como nos sites atuais.
     São três números: mínimo (celular) / proporcional / máximo (monitor grande).
     Mais respiro:  clamp(24px, 10vw, 200px)
     Menos respiro: clamp(20px, 5vw, 90px)
     Colado na borda: 0px                                                  */
  --margem-lateral: clamp(24px, 8vw, 150px);

  /* TAMANHO DA ASSINATURA NO RODAPÉ (a logo amarela escrita à mão).
     Menor: clamp(50px, 5vw, 70px)   ·   Maior: clamp(110px, 11vw, 155px)    */
  --logo-rodape: clamp(75px, 7.5vw, 105px);

  /* COR DE DESTAQUE — muda no site inteiro de uma vez.                     */
  --amarelo: #FFE500;

}
/* ████████████████ FIM DO PAINEL — daqui para baixo é o motor ████████████ */

/* ==========================================================================
   PIVOT — folha de estilo única
   Cores, tipografia e espaçamento vivem nas variáveis abaixo.
   Mexeu ali, muda o site inteiro.
   ========================================================================== */

/* --- Fontes (auto-hospedadas, nada carrega de fora) ---------------------- */
@font-face{
  font-family:'Archivo';font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url('../fonts/archivo-latin-ext-wdth-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Variáveis ----------------------------------------------------------- */
:root{
  --preto:#0A0A0A;
  --preto-2:#161616;
  --linha:#333333;
  --claro:#F0F0F0;
  --cinza:#8A8A8A;
  --cinza-2:#C4C4C4;

  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gutter:var(--margem-lateral);
  --max:var(--largura-max);
}

/* --- Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--fundo-fora);color:var(--claro);
  font-family:var(--sans);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.trava-scroll{overflow:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}

.mono{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase}
.pular-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--amarelo);color:var(--preto);padding:12px 18px;font-family:var(--mono);font-size:12px}
.pular-link:focus{left:12px;top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Container: centraliza o site e cria a borda das laterais ------------ */
.pagina{
  max-width:var(--largura-max);
  margin:0 auto;
  background:var(--preto);
  position:relative;
}
@media (max-width:900px){
  .pagina{border-left:0;border-right:0}
}

/* --- Cabeçalho (absoluto sobre o hero, igual ao modelo) ----------------- */
.topo{
  position:absolute;inset:0 0 auto 0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px var(--gutter);
  font-family:var(--mono);font-size:var(--texto-topo);letter-spacing:.12em;text-transform:uppercase;
  color:#F0F0F0;mix-blend-mode:difference;
}
.topo__marca{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.18em}
.topo__marca img{width:28px;height:28px}
.topo__nav{display:flex;gap:30px}
.topo__nav a{position:relative;padding:4px 0}
.topo__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:currentColor;transition:right .25s ease}
.topo__nav a:hover::after,.topo__nav a:focus-visible::after{right:0}
@media (max-width:640px){
  .topo{font-size:calc(var(--texto-topo) - 1px);padding:16px var(--gutter)}
  .topo__marca span{display:none}
  .topo__nav{gap:16px}
}

/* --- Hero ---------------------------------------------------------------- */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;
  padding:130px var(--gutter) clamp(40px,8vh,72px);
}
.hero__midia{position:absolute;inset:0}
.hero__midia video,.hero__midia img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.15);
}
.hero__midia video{opacity:0;transition:opacity .8s ease}
.hero__midia video.tocando{opacity:1}
.hero__veu{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.96) 6%,rgba(10,10,10,.35) 60%,rgba(10,10,10,.55))}
.hero__trama{
  position:absolute;inset:0;mix-blend-mode:multiply;opacity:.4;
  background-image:radial-gradient(var(--preto) 1.1px,transparent 1.4px);
  background-size:4px 4px;
}
.hero__conteudo{position:relative;display:flex;flex-direction:column;gap:clamp(14px,2vw,22px);max-width:min(100%,1100px)}
.hero__tag{font-family:var(--mono);font-size:clamp(10px,1.5vw,12px);letter-spacing:.16em;color:var(--amarelo);text-transform:uppercase}
.hero h1{
  margin:0;font-size:var(--titulo-hero);line-height:.84;
  font-weight:800;font-stretch:125%;letter-spacing:-.035em;text-transform:uppercase;
}
.hero p{margin:0;font-size:clamp(16px,2vw,22px);color:var(--cinza-2);max-width:620px}
.hero__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:14px 20px;border:1px solid var(--amarelo);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.btn--cheio{background:var(--amarelo);color:var(--preto)}
.btn--cheio:hover,.btn--cheio:focus-visible{background:transparent;color:var(--amarelo)}
.btn--vazio{color:var(--amarelo)}
.btn--vazio:hover,.btn--vazio:focus-visible{background:var(--amarelo);color:var(--preto)}

.faixa{height:8px;background:var(--amarelo)}

/* --- Seções -------------------------------------------------------------- */
.secao__cabeca{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:baseline;
  padding:clamp(32px,5vw,54px) var(--gutter) clamp(18px,2.5vw,26px);
}
.secao__titulo-filtro{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.secao__cabeca h2{
  margin:0;font-size:clamp(26px,4.5vw,42px);font-weight:800;font-stretch:125%;
  text-transform:uppercase;letter-spacing:-.01em;
}
.secao__meta{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--cinza);text-transform:uppercase}

/* --- Filtro de projetos --------------------------------------------------- */
.filtros{display:flex;flex-wrap:wrap;gap:8px}
.filtros button{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 16px;border:1px solid var(--linha);color:var(--cinza);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.filtros button:hover{color:var(--claro);border-color:var(--cinza)}
.filtros button.ativo{background:var(--amarelo);color:var(--preto);border-color:var(--amarelo)}

/* --- Grade de projetos --------------------------------------------------- */
.grade{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--linha);
  margin:0 var(--gutter);
}
@media (max-width:760px){.grade{grid-template-columns:1fr}}

.projeto{
  position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--preto-2);
  border-right:1px solid var(--linha);border-bottom:1px solid var(--linha);
  text-align:left;width:100%;display:block;
}
.projeto img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.12);
  transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s ease;
}
.projeto:hover img,.projeto:focus-visible img{transform:scale(1.05);filter:grayscale(0) contrast(1.05)}
.projeto__selo{
  position:absolute;left:clamp(14px,2vw,24px);top:clamp(14px,2vw,24px);
  font-family:var(--mono);font-size:clamp(10px,1.2vw,13px);font-weight:700;
  color:var(--preto);background:var(--amarelo);padding:5px 12px;letter-spacing:.06em;
}
.projeto__num{
  position:absolute;right:clamp(14px,2vw,24px);top:clamp(14px,2vw,24px);
  font-family:var(--mono);font-size:clamp(10px,1.2vw,13px);letter-spacing:.1em;color:var(--claro);
}
.projeto__pe{
  position:absolute;inset:auto 0 0 0;padding:clamp(20px,3.2vw,36px);
  display:flex;flex-direction:column;gap:clamp(8px,1.2vw,14px);align-items:flex-start;
  background:linear-gradient(to top,rgba(10,10,10,.95),transparent);
}
.projeto__tipo{font-family:var(--mono);font-size:clamp(10px,1.1vw,13px);letter-spacing:.14em;color:var(--cinza);text-transform:uppercase}
.projeto__nome{
  font-size:clamp(26px,5vw,56px);font-weight:800;font-stretch:115%;
  text-transform:uppercase;letter-spacing:-.02em;line-height:.9;color:var(--claro);
}
.projeto__abrir{
  font-family:var(--mono);font-size:clamp(10px,1.1vw,13px);font-weight:700;letter-spacing:.08em;
  color:var(--preto);background:var(--amarelo);padding:8px 14px;
}

/* --- Clientes ------------------------------------------------------------ */
.clientes{padding:clamp(36px,5vw,56px) var(--gutter);display:flex;flex-direction:column;gap:26px;border-top:1px solid var(--linha)}
/* Janela recorta a faixa e esmaece as duas pontas; a faixa em si é mais
   larga que a tela e desliza por dentro dela. */
.clientes__janela{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.clientes__grade{display:flex;gap:14px;width:max-content}
.clientes__grade.rola{animation:clientes-rolar 32s linear infinite}
.clientes__janela:hover .clientes__grade.rola{animation-play-state:paused}
@keyframes clientes-rolar{to{transform:translateX(-50%)}}
.clientes__grade>*{flex:0 0 clamp(140px,16vw,200px);height:clamp(72px,9vw,110px);border:1px solid var(--linha);display:block}
.clientes__grade img{width:100%;height:100%;object-fit:contain;padding:16px;
  filter:grayscale(1);opacity:.65;transition:opacity .2s ease,filter .2s ease}
.clientes__grade a:hover img,.clientes__grade a:focus-visible img{opacity:1;filter:grayscale(0)}
/* Logo escura ou colorida: ganha uma base branca e fica sempre com cor real,
   sem o tratamento em preto e branco do resto da faixa. */
.clientes__grade .fundo-branco{background:#fff}
.clientes__grade .fundo-branco img{filter:none;opacity:1;padding:10px}
@media (prefers-reduced-motion: reduce){.clientes__grade.rola{animation:none}}

/* --- Contato ------------------------------------------------------------- */
.contato{background:var(--amarelo);color:var(--preto);padding:clamp(40px,6vw,72px) var(--gutter);display:flex;flex-direction:column;gap:clamp(18px,3vw,28px)}
.contato__marca{width:clamp(44px,6vw,64px);height:auto}
.contato h2{margin:0;font-size:clamp(40px,9vw,96px);line-height:.86;font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:-.03em}
.contato__linhas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;
  border-top:3px solid var(--preto);padding-top:22px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.contato__linhas a{display:block}
.contato__linhas strong{display:block;font-size:clamp(15px,1.8vw,19px);margin-top:6px;word-break:break-word}
.contato__linhas a:hover strong,.contato__linhas a:focus-visible strong{text-decoration:underline}

.rodape{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:clamp(48px,7vw,84px) var(--gutter) clamp(32px,4vw,48px);
  background:var(--preto);text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--cinza);text-transform:uppercase;
}
.rodape__assinatura{width:var(--logo-rodape);height:auto}

/* --- Painel do case ------------------------------------------------------ */
.painel{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(10,10,10,.92);backdrop-filter:blur(6px);
  overflow-y:auto;overscroll-behavior:contain;
}
.painel[open],.painel.aberto{display:block}
.painel__caixa{
  background:var(--preto);border-top:8px solid var(--amarelo);
  max-width:var(--largura-max);margin:0 auto;min-height:100%;
  animation:sobe .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes sobe{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.painel__topo{
  position:sticky;top:0;z-index:3;background:var(--preto);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px var(--gutter);border-bottom:1px solid var(--linha);
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--cinza);text-transform:uppercase;
}
.painel__topo .marca{display:flex;align-items:center;gap:12px}
.painel__topo img{width:22px;height:22px}
.painel__fechar{background:var(--amarelo);color:var(--preto);padding:8px 16px;font-weight:700;font-family:var(--mono);letter-spacing:.08em}
.painel__capa{position:relative;height:clamp(240px,52vh,520px);overflow:hidden;display:flex;align-items:center;justify-content:center}
.painel__capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.1)}
.painel__capa::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.35)}
.painel__nota{
  position:absolute;left:var(--gutter);bottom:18px;z-index:1;
  font-family:var(--mono);font-size:11px;color:var(--preto);background:var(--claro);padding:5px 12px;text-transform:uppercase;
}
.painel__texto{padding:clamp(32px,5vw,56px) var(--gutter);display:grid;grid-template-columns:1fr 360px;gap:clamp(24px,4vw,56px)}
@media (max-width:900px){.painel__texto{grid-template-columns:1fr}}
.painel__texto h2{margin:0;font-size:clamp(34px,7vw,82px);line-height:.86;font-weight:800;font-stretch:120%;text-transform:uppercase;letter-spacing:-.03em}
.painel__intro{margin:0;font-size:clamp(17px,2.2vw,24px);line-height:1.4;color:var(--cinza-2);max-width:640px}
.painel__corpo{margin:0;font-size:clamp(15px,1.7vw,19px);line-height:1.55;color:var(--cinza);max-width:640px}
.painel__ficha{display:flex;flex-direction:column;gap:16px;border-left:1px solid var(--linha);padding-left:28px;font-family:var(--mono);font-size:13px}
@media (max-width:900px){.painel__ficha{border-left:0;border-top:1px solid var(--linha);padding:24px 0 0}}
.painel__ficha div{display:flex;justify-content:space-between;gap:16px;text-transform:uppercase}
.painel__ficha dt{color:var(--cinza);margin:0}
.painel__ficha dd{margin:0;text-align:right}
.painel__cta{margin-top:12px;text-align:center;justify-content:center}
/* Uma grade só, 4:5, no máximo 3 colunas — foto e vídeo tratados igual.
   O corte 4:5 é só da miniatura; aberta, a mídia mostra a proporção original. */
.painel__fotos{
  padding:0 var(--gutter) clamp(32px,5vw,56px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
@media (max-width:900px){.painel__fotos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.painel__fotos{grid-template-columns:1fr}}
.painel__foto{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden}
.painel__foto img,.painel__foto video{width:100%;height:100%;object-fit:cover;transition:opacity .2s ease}
.painel__foto img{filter:grayscale(.25) contrast(1.1)}
.painel__foto:hover img,.painel__foto:focus-visible img{opacity:.75}
.painel__foto-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--claro);background:rgba(10,10,10,.3);transition:background .15s ease;
}
.painel__foto--video:hover .painel__foto-play,.painel__foto--video:focus-visible .painel__foto-play{background:rgba(10,10,10,.5)}

.painel__nav{
  border-top:1px solid var(--linha);padding:22px var(--gutter);
  display:flex;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
}
.painel__nav button:first-child{color:var(--cinza)}
.painel__nav button:last-child{color:var(--amarelo)}
.painel__nav button:hover,.painel__nav button:focus-visible{color:var(--claro)}

/* --- Foto em tamanho total (lightbox) ------------------------------------- */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(10,10,10,.96);align-items:center;justify-content:center;
}
.lightbox.aberto{display:flex}
.lightbox__img{max-width:92vw;max-height:88vh;object-fit:contain}
.lightbox__video{max-width:92vw;max-height:88vh}
/* O reset "img,video{display:block}" do topo do arquivo cancela o [hidden]
   nativo (ele é regra do navegador, perde pra qualquer regra nossa) — sem
   isto, foto e vídeo ficavam visíveis ao mesmo tempo, um do lado do outro. */
.lightbox__img[hidden],.lightbox__video[hidden]{display:none}
.lightbox__fechar{
  position:absolute;top:18px;right:var(--gutter);z-index:1;
  background:var(--amarelo);color:var(--preto);padding:8px 16px;font-weight:700;
  font-family:var(--mono);letter-spacing:.08em;font-size:12px;text-transform:uppercase;
}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:1;
  width:48px;height:48px;border-radius:50%;
  background:rgba(20,20,20,.7);border:1px solid var(--linha);color:var(--claro);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.lightbox__nav:hover,.lightbox__nav:focus-visible{background:var(--amarelo);color:var(--preto);border-color:var(--amarelo)}
.lightbox__nav--ant{left:var(--gutter)}
.lightbox__nav--prox{right:var(--gutter)}
@media (max-width:600px){
  .lightbox__nav{width:40px;height:40px;font-size:16px}
  .lightbox__nav--ant{left:12px}
  .lightbox__nav--prox{right:12px}
}

/* --- Entrada suave ------------------------------------------------------- */
.revela{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.revela.visivel{opacity:1;transform:none}

/* --- Aviso sem JavaScript ------------------------------------------------ */
.aviso-nojs{padding:24px var(--gutter);color:var(--cinza-2);font-family:var(--mono);font-size:13px}
.aviso-nojs a{color:var(--amarelo);text-decoration:underline}

/* --- Página 404 ---------------------------------------------------------- */
.erro-404{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:var(--gutter)}
.erro-404 h1{margin:0;font-size:clamp(80px,20vw,220px);line-height:.8;font-weight:800;font-stretch:125%;color:var(--amarelo)}
.erro-404 p{margin:0;color:var(--cinza-2)}

/* --- Padrão para projeto ainda sem foto ---------------------------------- */
.ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(135deg,#1C1C1C 0 20px,#242424 20px 40px),
    var(--preto-2);
}
.ph::after{
  content:attr(data-num);
  font-family:var(--sans);font-weight:800;font-stretch:110%;
  font-size:clamp(60px,16vw,190px);line-height:1;color:rgba(240,240,240,.14);
  transform:translateY(-6%);
}
.painel__capa .ph::after{font-size:clamp(60px,12vw,150px)}
.painel__fotos .ph{position:relative;inset:auto;width:100%;height:100%}

/* --- Capa do case quando o projeto tem vídeo ----------------------------- */
.painel__capa--video{height:auto;display:block;background:#000}
.painel__capa--video::after{content:none}
.painel__capa--video video{width:100%;height:auto;max-height:70svh;display:block;background:#000}

/* --- Capa do case quando o projeto tem mockup --------------------------- */
/* A capa fica estática (igual a foto normal); o botão central abre a
   página inteira, rolável, na tela cheia (".mockup-tela" abaixo). */
.mockup__ver{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:10px;
  background:var(--amarelo);color:var(--preto);
  font-family:var(--mono);font-weight:700;font-size:clamp(13px,1.6vw,15px);letter-spacing:.06em;text-transform:uppercase;
  padding:16px 30px;border-radius:999px;box-shadow:0 10px 32px rgba(0,0,0,.5);
}
.mockup__ver:hover,.mockup__ver:focus-visible{background:var(--claro)}

/* --- Mockup em tamanho real, por cima de tudo (rola a tela inteira) ------- */
.mockup-tela{
  position:fixed;inset:0;z-index:210;display:none;
  background:rgba(10,10,10,.97);
  overflow-y:auto;overscroll-behavior:contain;
  padding:72px 0 48px;
}
.mockup-tela.aberto{display:block}
.mockup-tela__img{display:block;margin:0 auto;width:min(75vw,1100px)}
@media (max-width:700px){.mockup-tela__img{width:94vw}}
.mockup-tela__fechar{
  position:fixed;top:18px;right:var(--gutter);z-index:1;
  background:var(--amarelo);color:var(--preto);padding:8px 16px;font-weight:700;
  font-family:var(--mono);letter-spacing:.08em;font-size:12px;text-transform:uppercase;
}