/* Gusta Motion — landing. Base visual: a capa do Behance (azul quase preto + zigue-zague neon + ampulhetas em pixel). */
:root {
  --fundo: #050a16;
  --fundo-2: #0a1226;
  --fundo-3: #0f1932;
  --linha: rgba(200, 215, 255, 0.09);
  --texto: #eef2fb;
  --suave: #8f9bb6;
  --fraco: #5d6883;
  --gelo: #cfe6f5;
  --ciano: #1fa2e6;
  --violeta: #7a5be0;
  --magenta: #e0337e;
  --rosa: #ff3d7f;
  --laranja: #ff7a1a;
  --pessego: #ffc48a;
  --neon: linear-gradient(90deg, var(--gelo) 0%, var(--ciano) 18%, var(--violeta) 38%, var(--magenta) 58%, var(--rosa) 70%, var(--laranja) 88%, var(--pessego) 100%);
  --raio: 18px;
  --sai: cubic-bezier(.2, .75, .2, 1);
  --max: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--fundo); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fundo); color: var(--texto); font-weight: 300; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
svg { width: 1em; height: 1em; flex: none; }
::selection { background: var(--rosa); color: #fff; }
.wrap { width: min(var(--max), 100% - 48px); margin-inline: auto; }

/* navegação */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 28px;
  padding: 18px max(24px, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid transparent;
  transition: background .5s var(--sai), border-color .5s var(--sai), padding .5s var(--sai);
}
/* o vidro fica num ::before: blur direto na .nav prenderia o menu (position: fixed) dentro da barra */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity .5s var(--sai);
  background: rgba(5, 10, 22, .72); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
}
.nav.rolou::before { opacity: 1; }
.nav.rolou { border-color: var(--linha); padding-block: 12px; }
.logo { font-style: italic; letter-spacing: .32em; font-size: 14px; white-space: nowrap; }
.logo-a { font-weight: 300; }
.logo-b { font-weight: 500; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 14px; }
.nav-links a { color: var(--suave); transition: color .3s; position: relative; }
.nav-links a:hover, .nav-links a.ativo { color: var(--texto); }
.nav-links a.ativo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--neon); }
.nav-icons { display: flex; align-items: center; gap: 10px; }
.ico {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--suave);
  border: 1px solid var(--linha); font-size: 17px;
  transition: color .3s, border-color .3s, transform .4s var(--sai), background .3s;
}
.ico:hover { color: #fff; border-color: rgba(255, 255, 255, .35); transform: translateY(-2px); background: rgba(255, 255, 255, .04); }
.menu { display: none; }

/* botões */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px;
  font: 500 15px/1 "Poppins", sans-serif; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .45s var(--sai), box-shadow .45s var(--sai), background .3s, border-color .3s;
}
.btn svg { font-size: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 10px 16px; font-size: 13px; gap: 8px; }
.btn-sm svg { font-size: 16px; }
.btn-wpp { background: #fff; color: #08101f; }
.btn-wpp:hover { box-shadow: 0 10px 40px -8px rgba(255, 61, 127, .55); }
.btn-ghost { border-color: rgba(255, 255, 255, .22); color: var(--texto); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .04); }

/* herói */
.heroi { position: relative; min-height: min(640px, 76svh); display: grid; place-items: center; overflow: hidden; isolation: isolate; text-align: center; padding: 108px 24px 48px; }
.colunas { position: absolute; inset: 0; z-index: -3; display: flex; gap: 6vw; justify-content: center; opacity: .55; }
.colunas span { width: 9vw; background: linear-gradient(180deg, rgba(20, 34, 66, 0), rgba(20, 34, 66, .55) 40%, rgba(20, 34, 66, 0)); }
.raio {
  /* a capa do Behance (sem o selo), emendada com o espelho dela: desliza em loop sem costura */
  --alt: min(300px, 38vh);
  position: absolute; left: 0; top: 52%; height: var(--alt); width: calc(var(--alt) * 31.22); z-index: -2;
  background: url("faixa-neon.jpg") repeat-x 0 0 / auto 100%;
  transform: translateY(-50%); animation: desliza 90s linear infinite; filter: saturate(112%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
@keyframes desliza { to { transform: translate(-50%, -50%); } }
.heroi::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 45% at 50% 50%, rgba(5, 10, 22, .78), rgba(5, 10, 22, .25) 70%, rgba(5, 10, 22, 0)),
    linear-gradient(180deg, rgba(5, 10, 22, .55) 0%, rgba(5, 10, 22, 0) 22%, rgba(5, 10, 22, 0) 70%, var(--fundo) 100%);
}
.ampulheta {
  position: absolute; z-index: -1; width: 30px; height: 38px; color: #fff4ea;
  filter: drop-shadow(-2px 0 0 rgba(255, 40, 90, .75)) drop-shadow(2px 0 0 rgba(40, 200, 255, .6)) drop-shadow(0 0 14px rgba(255, 255, 255, .35));
  animation: vira 4.8s var(--sai) infinite, flutua 7s ease-in-out infinite alternate;
}
.ampulheta svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
.ampulheta.a1 { left: 9%; top: 22%; animation-delay: 0s, -2s; }
.ampulheta.a2 { right: 12%; top: 18%; width: 22px; height: 28px; animation-delay: -1.6s, -4s; opacity: .8; }
.ampulheta.a3 { right: 22%; bottom: 17%; width: 26px; height: 33px; animation-delay: -3.2s, -1s; }
.ampulheta.a4 { left: 20%; bottom: 13%; width: 18px; height: 23px; animation-delay: -.8s, -5s; opacity: .7; }
@keyframes vira { 0%, 62% { rotate: 0deg; } 80%, 100% { rotate: 180deg; } }
@keyframes flutua { from { translate: 0 -10px; } to { translate: 0 12px; } }
.selo {
  display: inline-block; padding: 9px 22px; margin-bottom: 30px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: #dfe6f5;
  margin-bottom: 22px;
}
/* nome em fonte variável: cada letra engrossa e afina devagar, em onda */
.nome { font-family: "Urbanist", "Poppins", sans-serif; font-style: italic; letter-spacing: -.02em; line-height: 1; white-space: nowrap; font-size: clamp(40px, 8.4vw, 124px); }
.nome .linha { display: inline-block; overflow: hidden; padding: .04em .06em .12em; }
.nome .letra {
  display: inline-block; transform: translateY(110%); font-weight: 300;
  animation: sobe 1.1s var(--sai) var(--d) forwards, peso 3.6s linear var(--p) infinite;
}
.nome .gradiente {
  background: var(--neon); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sobe 1.1s var(--sai) var(--d) forwards, peso 3.6s linear var(--p) infinite, brilho 9s ease-in-out 1.6s infinite alternate;
}
@keyframes sobe { to { transform: translateY(0); } }
/* sobe devagar, dá o pico, volta macio e descansa */
@keyframes peso {
  0% { font-weight: 300; animation-timing-function: cubic-bezier(.55, 0, .8, .35); }
  38% { font-weight: 850; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  66%, 100% { font-weight: 300; }
}
@keyframes brilho { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.heroi-sub { text-shadow: 0 2px 18px rgba(5, 10, 22, .95), 0 0 2px rgba(5, 10, 22, .8); margin: 22px auto 0; max-width: 640px; color: var(--suave); font-size: clamp(15px, 1.6vw, 18px); }
.heroi-acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.entra { opacity: 0; transform: translateY(18px); animation: entra 1s var(--sai) forwards; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* seções */
.secao { padding: 120px 0; }
.heroi + .secao { padding-top: 48px; }
.eyebrow { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--suave); margin-bottom: 16px; }
.eyebrow::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--neon); vertical-align: middle; margin-right: 12px; }
.titulo-secao { font-weight: 500; font-size: clamp(34px, 5vw, 64px); letter-spacing: -.03em; line-height: 1.05; }
.cabeca { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 56px; flex-wrap: wrap; }
.cabeca p { color: var(--suave); max-width: 380px; }

/* grade de projetos */
.projetos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 32px; }
.card { display: block; }
.card.destaque { grid-column: 1 / -1; }
.card.destaque .card-img { aspect-ratio: 16 / 8; }
.card-img { position: relative; aspect-ratio: 808 / 632; border-radius: var(--raio); overflow: hidden; background: var(--fundo-3); isolation: isolate; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sai); }
.card-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.card-ver {
  position: absolute; right: 18px; bottom: 18px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #08101f; font-size: 22px; transform: scale(.6); opacity: 0; transition: transform .6s var(--sai), opacity .4s;
}
.card:hover .card-img img { transform: scale(1.045); }
.card-img .card-gif { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--sai), transform 1.2s var(--sai); }
.card-img.gif-on .card-gif { opacity: 1; }
.card:hover .card-ver { transform: scale(1); opacity: 1; }
.card-info { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 20px; }
.card-titulo { font-weight: 500; font-size: clamp(17px, 1.7vw, 21px); letter-spacing: -.01em; line-height: 1.3; }
.card-tag { color: var(--fraco); font-size: 13px; white-space: nowrap; }
.card-desc { color: var(--suave); font-size: 14px; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* revelar ao rolar */
.revela { opacity: 0; transform: translateY(42px); transition: opacity 1.1s var(--sai), transform 1.1s var(--sai); }
.revela.vis { opacity: 1; transform: none; }

/* página do projeto */
.proj-topo { padding: 150px 0 60px; }
.voltar { display: inline-flex; align-items: center; gap: 10px; color: var(--suave); font-size: 14px; margin-bottom: 42px; transition: color .3s, gap .4s var(--sai); }
.voltar:hover { color: #fff; gap: 14px; }
.proj-titulo { font-weight: 500; font-size: clamp(36px, 6.4vw, 88px); letter-spacing: -.035em; line-height: 1.02; max-width: 16ch; }
.proj-meta { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linha); align-items: end; }
.proj-meta .desc { flex: 1 1 420px; color: var(--suave); max-width: 640px; }
.proj-meta dl { display: flex; gap: 34px; }
.proj-meta dt { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--fraco); }
.proj-meta dd { margin-top: 4px; }
.proj-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.proj-corpo { width: min(1400px, 100%); margin: 0 auto; }
.bloco-img img { width: 100%; height: auto; background: var(--fundo-2); }
.bloco-grade { display: flex; flex-wrap: wrap; }
.bloco-grade figure { margin: 0; }
.bloco-grade img { width: 100%; height: auto; background: var(--fundo-2); }
.bloco-video { position: relative; width: 100%; background: #000; }
.bloco-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bloco-video.arquivo video { display: block; width: 100%; height: auto; }
.bloco-texto { padding: 90px 24px; max-width: 760px; margin: 0 auto; text-align: center; }
.bloco-texto p { font-size: clamp(16px, 1.5vw, 19px); color: #d9e0ee; }
.bloco-texto p + p { margin-top: 1.1em; }
.bloco-texto p.en { font-style: italic; font-size: 14px; color: var(--suave); margin-top: .5em; }
.sem-blocos { text-align: center; padding: 30px 24px 10px; color: var(--suave); }
.proj-capa { width: min(1100px, 100% - 48px); margin: 0 auto; border-radius: var(--raio); overflow: hidden; }
.proximo { display: block; padding: 120px 0 40px; text-align: center; border-top: 1px solid var(--linha); margin-top: 110px; }
.proximo-titulo { font-weight: 500; font-size: clamp(30px, 5vw, 64px); letter-spacing: -.03em; line-height: 1.05; display: inline-flex; gap: 18px; align-items: center; transition: gap .5s var(--sai); }
.proximo:hover .proximo-titulo { gap: 30px; }
.proximo-titulo svg { font-size: .7em; }

/* sobre */
.sobre-topo { padding: 160px 0 40px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: center; }
.foto { position: relative; border-radius: 28px; padding: 1px; background: var(--neon); }
.foto img { border-radius: 27px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.foto::before { content: ""; position: absolute; inset: 20px; z-index: -1; background: var(--neon); filter: blur(60px); opacity: .45; }
.sobre-titulo { font-weight: 500; font-size: clamp(40px, 6vw, 84px); letter-spacing: -.035em; line-height: 1; }
.sobre-titulo em { font-weight: 300; }
.sobre-texto p { color: #d4dbea; font-size: clamp(16px, 1.45vw, 18px); margin-top: 1.2em; }
.sobre-texto p.en { color: var(--suave); font-style: italic; font-size: 14px; }
.servicos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.servico { padding: 30px 26px; border: 1px solid var(--linha); border-radius: var(--raio); background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)); transition: border-color .4s, transform .6s var(--sai); }
.servico:hover { border-color: rgba(255, 255, 255, .2); transform: translateY(-4px); }
.servico .n { font-size: 13px; color: var(--fraco); letter-spacing: .2em; }
.servico h3 { font-weight: 500; font-size: 19px; margin: 34px 0 8px; letter-spacing: -.01em; }
.servico p { color: var(--suave); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 10px 18px; border: 1px solid var(--linha); border-radius: 999px; color: #d4dbea; font-size: 14px; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }

/* contato / rodapé */
.contato { position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid var(--linha); }
.contato-fundo {
  position: absolute; inset: auto -10% -60% -10%; height: 120%; z-index: -1;
  background: url("capa-limpa.jpg") center / cover no-repeat; filter: blur(46px) saturate(125%); opacity: .55;
  -webkit-mask-image: radial-gradient(50% 60% at 50% 100%, #000, transparent); mask-image: radial-gradient(50% 60% at 50% 100%, #000, transparent);
}
.contato-in { padding: 130px 0 40px; text-align: center; }
.contato .eyebrow::before { display: none; }
.contato-titulo { font-weight: 500; font-size: clamp(40px, 7vw, 104px); letter-spacing: -.04em; line-height: 1; }
.contato-titulo em { white-space: nowrap; font-weight: 300; background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.contato-sub { color: var(--suave); margin-top: 22px; }
.contato-acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 42px; }
.contato-links { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 110px; padding-top: 28px; border-top: 1px solid var(--linha); }
.link-mail { display: inline-flex; align-items: center; gap: 10px; color: var(--suave); transition: color .3s; }
.link-mail:hover { color: #fff; }
.link-mail svg { font-size: 18px; }
.sociais { display: flex; gap: 10px; }
.rodape { margin-top: 26px; color: var(--fraco); font-size: 12px; text-align: left; }

#app { min-height: 60vh; }
.pagina { animation: pagina .8s var(--sai) both; }
@keyframes pagina { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* celular */
@media (max-width: 980px) {
  .servicos { grid-template-columns: repeat(2, 1fr); }
  .sobre-topo, .duas { grid-template-columns: 1fr; gap: 48px; }
  .foto { max-width: 460px; }
}
@media (max-width: 760px) {
  .wrap { width: min(var(--max), 100% - 32px); }
  .nav { padding: 14px 16px; gap: 12px; }
  .nav.rolou { padding-block: 10px; }
  .logo { font-size: 12px; letter-spacing: .26em; }
  .nav-links {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: center; gap: 30px;
    background: rgba(5, 10, 22, .96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    font-size: 28px; opacity: 0; pointer-events: none; transition: opacity .45s var(--sai); margin: 0;
  }
  .nav-links a { color: var(--texto); }
  .nav.aberto .nav-links { opacity: 1; pointer-events: auto; }
  .nav-icons { margin-left: auto; gap: 6px; }
  .nav-icons .ico { width: 34px; height: 34px; font-size: 15px; }
  .btn-sm span { display: none; }
  .btn-sm { padding: 9px; }
  .menu { display: grid; gap: 6px; place-content: center; width: 38px; height: 38px; border: 1px solid var(--linha); border-radius: 50%; background: none; cursor: pointer; }
  .menu span { display: block; width: 16px; height: 1.5px; background: #fff; transition: transform .4s var(--sai); }
  .nav.aberto .menu span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav.aberto .menu span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .heroi { min-height: 0; padding: 104px 16px 48px; }
  .raio { --alt: 22vh; top: 38%; animation-duration: 70s; }
  .nome { font-size: clamp(34px, 11.2vw, 64px); }
  .ampulheta.a2, .ampulheta.a4 { display: none; }
  .ampulheta.a3 { top: 21%; right: 9%; bottom: auto; }
  .heroi + .secao { padding-top: 32px; }
  .selo { font-size: 10px; letter-spacing: .22em; padding: 8px 16px; }
  .secao { padding: 84px 0; }
  .projetos { grid-template-columns: 1fr; gap: 44px; }
  .card.destaque .card-img { aspect-ratio: 808 / 632; }
  .card-ver { transform: scale(1); opacity: 1; width: 44px; height: 44px; font-size: 18px; }
  .proj-topo { padding: 120px 0 40px; }
  .proj-meta dl { gap: 24px; }
  .bloco-texto { padding: 60px 20px; }
  .servicos { grid-template-columns: 1fr; }
  .contato-in { padding: 96px 0 34px; }
  .contato-acoes .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .contato-links { justify-content: center; flex-direction: column; margin-top: 70px; }
  .rodape { text-align: center; }
  .sobre-topo { padding-top: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .revela { opacity: 1; transform: none; }
}