@font-face{font-family:Manrope;src:url("media/manrope.woff2") format("woff2");font-weight:200 800;font-display:swap}
*{box-sizing:border-box}
:root{color-scheme:dark;font-family:Manrope,Arial,sans-serif;background:#050505;--cor-titulo:#f3f3f1;color:var(--cor-titulo);--margem:clamp(1.25rem,4.5vw,6rem)}
@media (forced-colors: none) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--cor-titulo) #000;
  }
  @supports selector(::-webkit-scrollbar) {
    html { scrollbar-width: auto; scrollbar-color: auto; }
    html::-webkit-scrollbar { width: 6px; height: 6px; background: #000; }
    html::-webkit-scrollbar-track { background: #000; border-radius: 0; }
    html::-webkit-scrollbar-thumb { background: var(--cor-titulo); border-radius: 0; }
  }
}
body{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.percurso{height:100svh}
.com-movimento .percurso{height:260svh}
main { --preto-pupila: #000; }
.com-movimento #clientes {
  position: relative;
  margin-top: -100svh;
  opacity: var(--entrada-marcas, 0);
  visibility: var(--visibilidade-marcas, hidden);
}
.com-movimento .topo { opacity: var(--saida-olho, 1); }
#clientes {
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding: clamp(2.5rem, 5vw, 5rem) var(--margem);
  background: var(--preto-pupila);
}
.painel-clientes { width: 100%; max-width: 100rem; margin-inline: auto; }
/* Com movimento, o painel das marcas fica fixo por 80% de tela depois de chegar:
   aparece por inteiro e só então segue a rolagem. A âncora #clientes para no fim da entrada. */
.com-movimento #clientes {
  display: block;
  align-content: normal;
  min-height: 180svh;
  padding: 0;
  scroll-margin-top: -25svh;
}
.com-movimento .painel-clientes {
  position: sticky;
  top: 0;
  display: grid;
  align-content: center;
  box-sizing: border-box;
  min-height: 100svh;
  max-width: none;
  padding: clamp(2.5rem, 5vw, 5rem) max(var(--margem), calc((100% - 100rem) / 2));
}
.painel-clientes h2 { font-size: clamp(2.35rem, 5vw, 5.8rem); }
.logos-clientes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: clamp(1.8rem, 3.5vw, 4rem) 0 1.3rem;
  border-top: 1px solid #393939;
}
.logos-clientes li {
  min-height: clamp(4.5rem, 10svh, 8rem);
  display: grid;
  place-items: center;
  border-bottom: 1px solid #393939;
}
.logos-clientes img { width: 70%; height: clamp(2.75rem, 5.8svh, 4.7rem); object-fit: contain; }
.painel-clientes .seguir-web { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 620px) {
  .logos-clientes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos-clientes li { min-height: 4.1rem; }
  .logos-clientes img { width: 70%; height: 2.45rem; }
}
.palco{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:var(--preto-pupila)}
.retrato{position:absolute;inset:0;z-index:-1}
.retrato>*{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 50%}
video,canvas{opacity:0}
.topo,.case-top,footer{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.topo{padding:clamp(1.3rem,3vw,3rem) var(--margem)}
.topo nav { display: flex; align-items: center; gap: clamp(.8rem, 2.4vw, 2.5rem); }
.marca{width:clamp(7rem,12vw,12rem);height:auto}
.topo a,footer a{font-size:.89rem;font-weight:600;border-bottom:1px solid #70706e;padding:.4rem 0}
.topo a span{margin-left:.6rem}
.abertura{position:absolute;left:var(--margem);bottom:8%;pointer-events:none;text-shadow:0 2px 24px #0009}
.abertura p,.case-top,.escopo{font-size:.76rem;font-weight:650;letter-spacing:.09em}
.abertura p{margin:0 0 1rem}
h1,h2,.resultado strong{letter-spacing:-.065em;line-height:.98;margin:0;font-weight:540}
h1{font-size:clamp(3.8rem,6.6vw,8rem)}
h1 span,h2 span{color:#aaa}
.descer{position:absolute;right:var(--margem);bottom:8%;border:1px solid #777;border-radius:50%;width:3rem;height:3rem;display:grid;place-items:center;font-size:1.3rem}
#projetos{padding:clamp(2rem,5vw,5.5rem) var(--margem) 1.6rem;background:#090909;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between}
.case-top{color:#bebebc;border-bottom:1px solid #3b3b39;padding-bottom:1rem}
.case-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,6vw,7rem);align-items:center;padding:clamp(2.5rem,5vw,5rem) 0}
h2{font-size:clamp(3.2rem,6.4vw,7.4rem)}
.historia p,.resultado p{line-height:1.65;color:#c1c1be}
.historia p{max-width:34em;font-size:clamp(1rem,1.35vw,1.4rem)}
.historia h2{margin-bottom:1.6rem}
.foto-evento{display:block;width:100%;height:auto}
.retorno{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);padding-top:1.25rem}
.resultado strong{flex:none;font-size:clamp(4rem,6.5vw,7rem)}
.resultado p{max-width:27em;margin:0}
footer{border-top:1px solid #393939;padding-top:1.25rem}
.sobre {
  padding: clamp(3.5rem, 7vw, 7rem) var(--margem);
  background: #121212;
}
.perfil {
  max-width: 100rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  column-gap: clamp(2rem, 7vw, 8rem);
  row-gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.perfil h2 { grid-column: 1 / -1; }
.foto-perfil { display: block; width: 100%; max-width: 31rem; height: auto; }
.bio { max-width: 62ch; }
.bio p { margin: 0 0 1rem; color: #c6c6c2; line-height: 1.65; }
.bio .apresentacao {
  color: #f3f3f1;
  font-size: clamp(1.3rem, 2vw, 2rem);
  letter-spacing: -.035em;
  line-height: 1.32;
  margin-bottom: 1.25rem;
}
@media(max-width:700px){
  .perfil { grid-template-columns: 1fr; gap: 1.5rem; }
  .foto-perfil { max-width: 22rem; }
}
@media(max-aspect-ratio:1/1){
  .retrato{top:10%;bottom:15%}
  .retrato>*{object-fit:cover}
  .retrato{mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 84%,transparent)}
  .abertura{bottom:5%}
  .descer{bottom:5%}
}
@media(max-width:680px){
  .case-grid{grid-template-columns:1fr;gap:2rem;padding:2.5rem 0}
  .case-top{font-size:.66rem}
  h1{font-size:clamp(3.4rem,14vw,5rem)}
}
@media(prefers-reduced-motion:reduce){.com-movimento .percurso{height:100svh}}