/* Hassa Web: roxo neon sobre preto, como no Instagram @hassaweb */
@font-face { font-family: 'Archivo'; src: url(../fontes/archivo.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; 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'; src: url(../fontes/archivo-ext.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; 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: 'Instrument Serif'; src: url(../fontes/instrument-serif-italic.woff2) format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(../fontes/instrument-serif.woff2) format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fontes/jetbrains-mono.woff2) format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --fundo: #07030F;
  --fundo-2: #0e0620;
  --roxo: #7C3AED;
  --neon: #A36BFF;
  --lilas: #C9A8FF;
  --lavanda: #F0ECFA;
  --escuro: #1B0836;
  --texto: #EDE7FA;
  --texto-2: #ADA2C6;
  --linha: rgba(201, 168, 255, .16);
  --borda: 16px;
  --lado: clamp(16px, 4vw, 56px);
  --grad: linear-gradient(180deg, #FFFFFF 0%, #E9DDFF 38%, #B48CFF 72%, #8B5CF6 100%);
  --brilho: 0 0 24px rgba(124, 58, 237, .55), 0 0 64px rgba(124, 58, 237, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* nada pode passar da largura da tela: no celular isso faz a página afastar o zoom e ficar solta para os lados */
html { -webkit-text-size-adjust: 100%; background: var(--fundo); overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: 'Archivo', system-ui, sans-serif; font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
::selection { background: var(--roxo); color: #fff; }
:focus-visible { outline: 2px solid var(--lilas); outline-offset: 4px; border-radius: 6px; }

.serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.grad, .grad .ch { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad { filter: drop-shadow(0 0 28px rgba(124, 58, 237, .45)); }
.grad:has(.ch), .grad:has(.ln) { background: none; }
.grad .ln { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.ico { width: 20px; height: 20px; flex: none; }

/* ---------- canvas e camadas ---------- */
#cena { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; display: block; }
main, .rodape { position: relative; z-index: 2; }
/* granulado: a camada fica do tamanho da tela; só o desenho de dentro (maior) se mexe */
.grao { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .07; overflow: hidden; }
.grao::before {
  content: ''; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grao 1s steps(4) infinite;
}
@keyframes grao { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* ---------- abertura ---------- */
.abertura { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: all; }
.abertura-meia { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--fundo); }
.abertura-meia.cima { top: 0; }
.abertura-meia.baixo { bottom: 0; }
.abertura-centro { position: relative; display: grid; justify-items: center; gap: 22px; }
.abertura-h { width: clamp(84px, 12vw, 132px); height: auto; overflow: visible; }
.abertura-h path { fill: url(#grad-h); fill-opacity: 0; stroke: var(--lilas); stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(163, 107, 255, .8)); }
.abertura-info { display: flex; gap: 18px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .3em; color: var(--texto-2); }
.abertura-num { color: var(--lilas); min-width: 3ch; }
html.aberto .abertura { pointer-events: none; }

/* ---------- HUD ---------- */
.hud { position: fixed; inset: 0; z-index: 40; pointer-events: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; color: rgba(201, 168, 255, .55); opacity: 0; transition: opacity .8s; }
html.aberto .hud { opacity: 1; }
.hud-mira { position: absolute; top: 50%; font-size: 18px; color: rgba(201, 168, 255, .3); transform: translateY(-50%); }
.hud-e { left: 22px; } .hud-d { right: 22px; }
.hud-tc { position: absolute; left: var(--lado); bottom: 22px; }
.hud-secao { position: absolute; right: var(--lado); bottom: 22px; }

/* ---------- cursor ---------- */
.cursor, .cursor-ponto { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: none; }
html.cursor-fino .cursor, html.cursor-fino .cursor-ponto { display: grid; }
.cursor { width: 42px; height: 42px; margin: -21px 0 0 -21px; border: 1.5px solid rgba(201, 168, 255, .6); border-radius: 50%; place-items: center; transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), margin .35s cubic-bezier(.2,.8,.2,1), background-color .35s, border-color .35s; }
.cursor-texto { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .2s; }
.cursor.com-texto { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: rgba(124, 58, 237, .85); border-color: transparent; backdrop-filter: blur(4px); }
.cursor.com-texto .cursor-texto { opacity: 1; }
.cursor-ponto { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--lilas); box-shadow: 0 0 10px var(--neon); }
html.cursor-fino, html.cursor-fino a, html.cursor-fino button, html.cursor-fino .card { cursor: none; }

/* ---------- topo ---------- */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 72px; padding: 0 var(--lado);
  display: flex; align-items: center; gap: 28px; transition: transform .5s cubic-bezier(.2,.8,.2,1), background-color .4s, border-color .4s;
  border-bottom: 1px solid transparent; opacity: 0;
}
html.aberto .topo { opacity: 1; transition: opacity .8s .3s, transform .5s cubic-bezier(.2,.8,.2,1), background-color .4s, border-color .4s; }
.topo.solido { background: rgba(7, 3, 15, .62); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-color: var(--linha); }
.topo.escondido { transform: translateY(-140%); }
.marca { display: flex; align-items: center; gap: 12px; font-weight: 850; font-stretch: 112%; letter-spacing: .02em; font-size: 17px; white-space: nowrap; flex: none; }
.marca-h { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(163, 107, 255, .55)); }
.menu { display: flex; gap: 6px; margin-left: auto; }
.menu a { padding: 8px 14px; border-radius: 99px; font-size: 15px; color: var(--texto-2); transition: color .25s, background-color .25s; }
.menu a:hover { color: #fff; background: rgba(163, 107, 255, .12); }
.menu-botao, .menu-cel { display: none; }

/* ---------- botões ---------- */
.botao {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: 99px; font-weight: 700; font-size: 16px; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 45%, #6D28D9 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px -8px rgba(124, 58, 237, .8), 0 0 0 1px rgba(201, 168, 255, .25);
  transition: box-shadow .3s, filter .3s;
  will-change: transform;
}
.botao:hover { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 44px -6px rgba(163, 107, 255, .95), 0 0 0 1px rgba(201, 168, 255, .5); }
.botao .ico { transition: transform .3s; }
.botao:hover .ico { transform: translateX(4px); }
.botao-p { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.botao-g { min-height: 62px; padding: 0 34px; font-size: 18px; }
.botao-vazado { background: rgba(14, 6, 32, .35); box-shadow: inset 0 0 0 1.5px rgba(201, 168, 255, .45); backdrop-filter: blur(6px); }
.botao-vazado:hover { box-shadow: inset 0 0 0 1.5px var(--lilas), 0 0 30px -6px rgba(163, 107, 255, .7); }

/* ---------- títulos ---------- */
.titulo { font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(40px, 7vw, 108px); line-height: .92; letter-spacing: -0.02em; }

/* ---------- início ---------- */
.hero { position: relative; overflow-x: clip; }
.hero-palco {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  display: grid; grid-template-rows: 1fr auto; padding: 84px var(--lado) clamp(48px, 7vh, 72px);
  text-align: center;
}
.hero-3d { position: relative; min-height: 0; }
.h-reserva { display: none; }
html.sem-3d .h-reserva { display: block; position: absolute; inset: 0; margin: auto; height: 90%; width: auto; filter: drop-shadow(0 0 40px rgba(124, 58, 237, .6)); }
.hero-texto { display: grid; justify-items: center; gap: clamp(10px, 1.6vh, 18px); }
.hero-sobre { font-size: clamp(28px, 3.4vw, 54px); line-height: 1; color: var(--lavanda); }
.hero-titulo { font-weight: 900; font-stretch: 125%; font-size: clamp(46px, 7vw, 116px); line-height: .9; letter-spacing: -0.025em; margin-top: .12em; }
.hero-titulo > span { display: block; }
.hero-desc { max-width: 560px; color: var(--texto-2); font-size: clamp(16px, 1.3vw, 19px); }
.hero-acoes { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.hero-servicos { display: flex; gap: 10px 26px; flex-wrap: wrap; justify-content: center; color: var(--lilas); margin-top: 6px; }
.hero-servicos li { display: flex; align-items: center; gap: 10px; }
.hero-servicos li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(201, 168, 255, .7); box-shadow: inset 0 0 0 3px var(--fundo), inset 0 0 0 10px rgba(163, 107, 255, .8); }
.rolar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: none; align-items: center; gap: 12px; color: rgba(201,168,255,.55); font-size: 10.5px; }
.rolar i { width: 1px; height: 26px; background: linear-gradient(var(--lilas), transparent); animation: rolar 1.8s cubic-bezier(.6,0,.2,1) infinite; transform-origin: top; }
@keyframes rolar { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- manifesto ---------- */
.manifesto { padding: clamp(64px, 11vh, 120px) var(--lado) clamp(80px, 14vh, 140px); }
.manifesto-texto {
  max-width: 1180px; margin: 0 auto; text-align: center;
  font-weight: 800; font-stretch: 108%; font-size: clamp(30px, 4.4vw, 68px); line-height: 1.08; letter-spacing: -0.02em; color: var(--lavanda);
}
.manifesto-texto .pal { opacity: .14; transition: none; }

/* ---------- faixas ---------- */
.faixas { position: relative; height: clamp(170px, 24vw, 280px); overflow: hidden; margin: 0 0 clamp(40px, 8vh, 90px); }
.faixa { position: absolute; left: -10%; width: 120%; top: 50%; overflow: hidden; }
.faixa-linha { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); width: max-content; padding: 0 22px; will-change: transform; }
.faixa span { font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(28px, 4.6vw, 70px); line-height: 1; white-space: nowrap; letter-spacing: -0.01em; }
.faixa svg { width: clamp(26px, 3.4vw, 48px); height: clamp(26px, 3.4vw, 48px); flex: none; }
.faixa-a { transform: translateY(-62%) rotate(-4deg); background: linear-gradient(90deg, #6D28D9, #8B5CF6 50%, #A36BFF); padding: clamp(12px, 1.6vw, 22px) 0; z-index: 2; box-shadow: 0 0 60px rgba(124, 58, 237, .55); }
.faixa-a span { color: var(--escuro); }
.faixa-a svg { fill: var(--escuro); }
.faixa-b { transform: translateY(-10%) rotate(3deg); background: rgba(14, 6, 32, .9); border-block: 1px solid var(--linha); padding: clamp(10px, 1.3vw, 18px) 0; }
.faixa-b span { color: transparent; -webkit-text-stroke: 1.4px rgba(201, 168, 255, .75); }
.faixa-b svg { fill: rgba(201, 168, 255, .5); }

/* ---------- serviços ---------- */
.servicos-palco { position: relative; height: 100vh; height: 100svh; min-height: 600px; padding: 96px var(--lado) 40px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px; }
.servicos-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.servicos-topo .titulo { min-width: 0; }
.servicos-contador { flex: none; font-size: 14px; color: var(--texto-2); }
.servicos-contador .cont-atual { color: var(--lilas); font-size: 28px; letter-spacing: .05em; }
.servicos-corpo { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 24px; min-height: 0; }
.servicos-textos { position: relative; align-self: center; height: 100%; max-height: 520px; }
.servico { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; visibility: hidden; }
.servico.ativo { visibility: visible; }
.servico-nome { font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(38px, 4.6vw, 76px); line-height: .92; letter-spacing: -0.02em; }
.servico-frase { font-size: clamp(26px, 2.4vw, 38px); line-height: 1.05; color: var(--lavanda); }
.servico-desc { color: var(--texto-2); max-width: 470px; font-size: clamp(16px, 1.15vw, 18px); }
.servico-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.servico-tags li { padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(201, 168, 255, .35); color: var(--lilas); font-size: 11.5px; background: rgba(124, 58, 237, .08); }
.servicos-3d { position: relative; min-height: 0; }
.servicos-barra { position: absolute; left: var(--lado); right: var(--lado); bottom: 22px; height: 2px; background: rgba(201, 168, 255, .12); border-radius: 2px; overflow: hidden; }
.servicos-barra span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--roxo), var(--lilas)); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 12px var(--neon); }

/* ---------- portfólio ---------- */
.portfolio-palco { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding-top: 96px; }
.portfolio-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 var(--lado); }
.portfolio-desc { color: var(--texto-2); max-width: 300px; text-align: right; }
.so-cel { display: none; }
.trilho { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); padding: 0 var(--lado); width: max-content; will-change: transform; perspective: 1400px; }
.card { position: relative; flex: none; display: grid; gap: 18px; transform-style: preserve-3d; outline: none; }
.card-tela { position: relative; border-radius: var(--borda); transform-style: preserve-3d; transition: box-shadow .4s; }
.card-site { width: clamp(300px, 41vw, 640px); }
.card-site .card-tela { aspect-ratio: 16 / 10.6; background: #120a22; border: 1px solid rgba(201, 168, 255, .22); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4); overflow: visible; }
.janela-barra { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-bottom: 1px solid rgba(201, 168, 255, .14); background: #0f0820; border-radius: var(--borda) var(--borda) 0 0; }
.janela-barra i { width: 10px; height: 10px; border-radius: 50%; background: rgba(201, 168, 255, .25); }
.janela-barra i:first-child { background: var(--roxo); }
.janela-barra span { margin-left: auto; font-size: 10.5px; color: var(--texto-2); }
.slides { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; overflow: hidden; border-radius: 0 0 var(--borda) var(--borda); }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.06); transition: opacity .9s, transform 4s linear; }
.slides img.ativa { opacity: 1; transform: scale(1); }
.card-cel { position: absolute; right: -4%; bottom: -10%; width: 21%; aspect-ratio: 780 / 1688; height: auto; object-fit: cover; object-position: top; border-radius: 14px; border: 3px solid #1a1130; box-shadow: 0 24px 50px -10px rgba(0,0,0,.85), 0 0 0 1px rgba(201,168,255,.3); transform: translateZ(40px); }
.card-reel { width: calc(min(50vh, 470px) * 9 / 16); }
.card-reel .card-tela { aspect-ratio: 9 / 16; overflow: hidden; border-radius: 24px; border: 1px solid rgba(201, 168, 255, .25); background: #0f0820 center / cover no-repeat; box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
.card-reel video { width: 100%; height: 100%; object-fit: cover; }
.card-reel .card-tela::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 6px #0b0616; pointer-events: none; }
.card-info { display: grid; gap: 2px; padding: 0 4px; }
.card-info h3 { font-weight: 850; font-stretch: 112%; font-size: clamp(19px, 1.6vw, 25px); line-height: 1.15; letter-spacing: -0.01em; }
.card-info p { color: var(--texto-2); font-size: 15px; }
.card-info .mono { color: var(--lilas); font-size: 11px; margin-top: 4px; }
.card:nth-child(even) { margin-top: 5vh; }
.portfolio .titulo { font-size: clamp(40px, 6vw, 96px); }
.processo .titulo { max-width: 17ch; font-size: clamp(38px, 5.6vw, 92px); }
.card:hover .card-tela, .card:focus-visible .card-tela { box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px var(--lilas), 0 0 50px -10px rgba(163, 107, 255, .7); }
.card-proximo {
  width: clamp(280px, 30vw, 420px); aspect-ratio: 4 / 5; padding: 32px; border-radius: 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(124, 58, 237, .45), rgba(14, 6, 32, .9) 60%); border: 1px solid rgba(201, 168, 255, .3);
}
.card-proximo-h { width: 38%; height: auto; margin-bottom: auto; filter: drop-shadow(0 0 24px rgba(163, 107, 255, .7)); }
.card-proximo .serif { font-size: clamp(30px, 3vw, 44px); line-height: 1; color: var(--lavanda); }
.card-proximo strong { font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(30px, 3vw, 46px); line-height: .95; margin-bottom: 18px; }
.card-proximo .botao { align-self: flex-start; }

/* ---------- processo ---------- */
.processo-palco { position: relative; min-height: 100vh; min-height: 100svh; padding: 110px var(--lado) 60px; display: grid; grid-template-rows: auto 1fr; gap: clamp(30px, 6vh, 70px); }
.passos { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 48px); align-items: start; align-self: center; }
.passo { position: relative; display: grid; gap: 10px; padding-top: 70px; opacity: .3; transition: opacity .6s; }
.passo:nth-child(even) { margin-top: clamp(40px, 9vh, 100px); }
.passo.ativo { opacity: 1; }
.passo-ponto { position: absolute; left: 0; top: 0; width: 44px; height: 44px; }
.passo-num { color: var(--lilas); font-size: 13px; }
.passo h3 { font-weight: 900; font-stretch: 120%; text-transform: uppercase; font-size: clamp(24px, 2.4vw, 38px); line-height: 1; letter-spacing: -0.01em; }
.passo p { color: var(--texto-2); max-width: 290px; }

/* ---------- final ---------- */
.final-palco { position: relative; height: 100vh; height: 100svh; min-height: 620px; display: grid; grid-template-rows: minmax(32vh, 1fr) auto; padding: 80px var(--lado) clamp(48px, 9vh, 100px); text-align: center; }
.final-3d { position: relative; min-height: 0; }
.final-texto { display: grid; justify-items: center; gap: 14px; }
.final-sobre { font-size: clamp(30px, 3.6vw, 58px); line-height: 1; color: var(--lavanda); }
.final-titulo { font-weight: 900; font-stretch: 125%; font-size: clamp(42px, 6.4vw, 110px); line-height: .9; letter-spacing: -0.025em; }
.final-titulo > span { display: inline-block; }
.final-desc { max-width: 520px; color: var(--texto-2); }
.final-acoes { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.link-insta { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--lilas); padding: 10px 6px; border-bottom: 1px solid rgba(201, 168, 255, .35); }
.link-insta:hover { color: #fff; border-color: #fff; }

/* ---------- rodapé ---------- */
.rodape { z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 28px var(--lado) 36px; border-top: 1px solid var(--linha); background: var(--fundo); color: var(--texto-2); }
.rodape-marca { display: flex; align-items: center; gap: 10px; font-weight: 850; font-stretch: 112%; color: var(--texto); }
.rodape-marca .marca-h { width: 26px; height: 26px; }
.rodape .mono { font-size: 11px; }

/* ---------- janela (projeto aberto) ---------- */
.janela { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid rgba(201, 168, 255, .3); border-radius: 22px; background: #0d0619; color: var(--texto); overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.8), 0 0 80px -20px rgba(124,58,237,.6); }
.janela::backdrop { background: rgba(4, 1, 10, .78); backdrop-filter: blur(8px); }
.janela[open] { display: grid; grid-template-rows: auto 1fr; animation: abreJanela .45s cubic-bezier(.2,.8,.2,1); }
@keyframes abreJanela { from { opacity: 0; transform: translateY(30px) scale(.97); } }
.janela-fechar { justify-self: end; margin: 12px 12px 0 0; padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(201,168,255,.35); font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lilas); }
.janela-fechar:hover { background: rgba(124,58,237,.25); color: #fff; }
.janela-conteudo { overflow: auto; padding: 8px clamp(16px, 3vw, 36px) clamp(20px, 3vw, 36px); overscroll-behavior: contain; }
.janela-conteudo h3 { font-weight: 900; font-stretch: 120%; text-transform: uppercase; font-size: clamp(26px, 3vw, 44px); line-height: 1; }
.janela-conteudo > p { color: var(--texto-2); margin: 8px 0 22px; }
.janela-galeria { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .32fr); gap: 18px; align-items: start; }
.janela-galeria .col { display: grid; gap: 18px; }
.janela-galeria img { width: 100%; border-radius: 12px; border: 1px solid rgba(201,168,255,.2); }
.janela-video { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
.janela-video video { height: min(72vh, 680px); width: auto; aspect-ratio: 9/16; border-radius: 18px; background: #000; }
.janela-video .mono { color: var(--lilas); }

/* ---------- celular e tablet ---------- */
@media (min-width: 900px) {
  .rolar { display: flex; }
}
@media (max-width: 899px) {
  body { font-size: 16px; }
  .hud, .menu, .topo > .botao-p { display: none; }
  .topo { height: 64px; }
  .menu-botao { display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 10px 16px; border-radius: 99px; border: 1px solid rgba(201,168,255,.35); background: rgba(14,6,32,.82); font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; position: relative; z-index: 2; }
  .menu-botao i { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .35s; }
  .menu-botao i + i { margin-left: -26px; transform: translateY(5px); }
  .menu-botao i:first-of-type { transform: translateY(-2px); }
  html.menu-aberto .menu-botao i:first-of-type { transform: translateY(1.5px) rotate(45deg); }
  html.menu-aberto .menu-botao i + i { transform: translateY(0) rotate(-45deg); }
  .menu-cel { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: 90px var(--lado) 40px; background: rgba(7, 3, 15, .97); clip-path: circle(0% at calc(100% - 48px) 32px); visibility: hidden; transition: clip-path .7s cubic-bezier(.7,0,.2,1), visibility 0s .7s; }
  html.menu-aberto .menu-cel { clip-path: circle(150% at calc(100% - 48px) 32px); visibility: visible; transition: clip-path .7s cubic-bezier(.7,0,.2,1), visibility 0s; }
  .menu-cel nav { display: grid; gap: 4px; }
  .menu-cel nav a { display: flex; align-items: baseline; gap: 14px; font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(30px, 10.5vw, 60px); line-height: 1.1; }
  .menu-cel nav small { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lilas); font-weight: 500; }
  .menu-cel .botao { align-self: flex-start; }

  .hero-palco { padding-top: 72px; padding-bottom: 28px; }
  .hero-titulo { font-size: clamp(44px, 15vw, 96px); }
  .hero-titulo > span { display: block; }
  .hero-acoes { flex-direction: column; align-items: stretch; width: min(100%, 360px); }
  .hero-servicos { gap: 8px 18px; font-size: 10.5px; }

  /* celular: o texto dos três serviços fica empilhado no mesmo lugar e a altura dele vem do maior;
     o 3D fica com o resto da tela. Nada pode alargar a coluna além da tela. */
  .titulo { font-size: clamp(30px, 10vw, 56px); }
  .servicos-palco { min-height: 500px; padding-top: 78px; padding-bottom: 34px; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  .servicos-topo { gap: 12px; }
  .servicos-contador .cont-atual { font-size: 22px; }
  .servicos-corpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
  .servicos-3d { order: -1; min-height: 140px; }
  .servicos-textos { height: auto; max-height: none; align-self: end; display: grid; }
  .servico { position: relative; inset: auto; grid-area: 1 / 1; justify-content: flex-start; gap: 10px; }
  .servico-nome { font-size: clamp(30px, 9.8vw, 50px); }
  .servico-frase { font-size: clamp(21px, 6.5vw, 25px); }
  .servico-desc { font-size: 15px; }
  .servico-tags li { padding: 6px 11px; font-size: 10.5px; }
  /* a altura do palco é a da tela com as barras do navegador à mostra (svh) */
  .servicos-palco { container-type: size; }

  .portfolio-palco { padding-top: 64px; display: flex; flex-direction: column; justify-content: center; gap: 30px; }
  .card-reel { width: calc(min(56vh, 480px) * 9 / 16); }
  .rodape { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rodape .mono { letter-spacing: .08em; }
  .portfolio-topo { flex-direction: column; align-items: flex-start; gap: 8px; }
  .portfolio-desc { text-align: left; }
  .so-pc { display: none; } .so-cel { display: inline; }
  .card-site { width: 82vw; }
  .card-reel { width: calc(min(50vh, 440px) * 9 / 16); }
  .card:nth-child(even) { margin-top: 0; }
  .card-cel { width: 24%; right: -2%; }

  .processo-palco { padding-top: 96px; min-height: 0; }
  .passos { grid-template-columns: 1fr; gap: 54px; padding-left: 64px; }
  .passo { padding-top: 0; }
  .passo:nth-child(even) { margin-top: 0; }
  .passo-ponto { left: -64px; top: -4px; }

  .final-palco { padding-top: 80px; }
  .final-titulo { font-size: clamp(40px, 13.5vw, 90px); }
  .final-titulo > span { display: block; }
  .janela-galeria { grid-template-columns: 1fr; }
  .janela-galeria .col:last-child { grid-template-columns: 1fr 1fr; }
  .janela-video { grid-template-columns: 1fr; justify-items: center; }
  .janela-video video { height: min(64vh, 600px); }
}
/* celular: tira o que pesa em cima do 3D (desfoque de vidro recalculado a cada quadro e granulado animado) */
@media (max-width: 899px), (pointer: coarse) {
  .grao { display: none; }
  .topo.solido { background: rgba(7, 3, 15, .9); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .botao-vazado { backdrop-filter: none; background: rgba(14, 6, 32, .72); }
}
@media (max-width: 899px) and (max-height: 700px) {
  .hero-desc { display: none; }
  .servico-desc { font-size: 14.5px; }
}
/* celular com pouca altura visível: tira a descrição dos serviços para o 3D não ficar espremido
   (nome, frase e etiquetas continuam) */
@container (max-height: 640px) {
  .servico-desc { display: none; }
}
/* telas bem estreitas (iPhone com "Zoom da tela" fica com 320) */
@media (max-width: 360px) {
  .topo { gap: 12px; }
  .marca { font-size: 15px; gap: 10px; }
  .marca-h { width: 30px; height: 30px; }
  .menu-botao { padding: 9px 13px; }
  .servico-desc { font-size: 14px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .grao::before, .rolar i { animation: none; }
}