/* Tokens da identidade v0n. Fonte: MazyOS/identidade/design-guide.md */
:root{
  /* Preto total (blackout) a pedido do Kauã em 21/09. O guia ainda diz
     #121317. */
  --carbono:#000;     --grafite:#1B1D23;
  --linha:#2A2D35;    --aco:#8C96A3;   /* 6.19:1 sobre #121317, sobe no preto */
  --osso:#ECEDE8;     --ouro:#FFC531;
  --sucesso:#3FBF7F;

  /* Superfície translúcida. Mecanismo medido no MazyOS (branco a 3/8/16%),
     escrito na cor da v0n. O grafite sobra pro painel que precisa ser opaco. */
  --sup:rgb(236 237 232 / .03);
  --borda:rgb(236 237 232 / .08);
  --borda-forte:rgb(236 237 232 / .16);

  --raio:14px;   /* cartão, painel, campo */
  --raio-g:24px; /* bloco grande */
  --raio-p:999px;/* botão em pílula */

  /* Movimento. Números medidos no styles.css do MazyOS. */
  --saida:cubic-bezier(.22, 1, .36, 1);
  --rapido:.2s;  /* hover, foco, estado de botão */
  --medio:.3s;   /* abrir e fechar */
  --entra:.6s;   /* entrada de seção por rolagem */

  --env:1120px;

  /* Peso do texto corrido do site: Inter Medium, a pedido do Kauã em 27/09
     (era 400, Inter Regular; pra voltar, é só trocar aqui). */
  --peso-texto:500;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--carbono);
  color:var(--osso);
  font:var(--peso-texto) 17px/1.6 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

.env{width:min(100% - 40px, var(--env)); margin-inline:auto}

/* Título grande: Barlow Condensed 700, caixa alta, a pedido do Kauã em 22/09
   (era 200). Condensada em caixa alta lê menor que sans normal no mesmo px,
   por isso a escala subiu (64→76, 44→52). */
.t1{font-family:'Barlow Condensed', 'Inter', system-ui, sans-serif;
    font-size:clamp(44px, 8.5vw, 76px); font-weight:700; text-transform:uppercase;
    letter-spacing:-.02em; line-height:1; margin:0}
.t2{font-family:'Barlow Condensed', 'Inter', system-ui, sans-serif;
    font-size:clamp(34px, 5.6vw, 52px); font-weight:200; text-transform:uppercase;
    letter-spacing:-.02em; line-height:1; margin:0}
.t3{font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0}

/* .t2 ainda é 200: em tela pequena sobe pra 300, traço de 200 a 360px fica frágil e some no sol,
   e o público nº 1 do spec está na rua. */
@media (max-width:599px){
  .t2{font-weight:300}
}

.rotulo{font:500 13px/1 'IBM Plex Mono', ui-monospace, monospace;
        text-transform:uppercase; letter-spacing:.09em; color:var(--ouro)}

/* Etiqueta de seção encostada numa régua de 1px — ficha técnica, não menu. */
.ficha-eyebrow{display:flex; align-items:center; gap:16px; margin:0 0 28px}
.ficha-eyebrow::after{content:''; flex:1 1 auto; height:1px; background:var(--linha)}

/* Uma palavra do título em ouro. O .t1 inteiro já é caixa alta agora, então
   o que marca a palavra é a cor — e neon em ouro o spec permite, em osso não. */
.t1__marca{color:var(--ouro); text-shadow:0 0 24px rgb(255 197 49 / .35)}

p{max-width:65ch}

a{color:inherit}
:focus-visible{outline:2px solid var(--ouro); outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  /* Rede de segurança: se o JS não rodar, nada fica invisível esperando classe. */
  .entra, .entra-fade, .entra-regua{opacity:1 !important; transform:none !important}
  .entra-regua::after{transform:none !important}
}

/* ===== Entrada por rolagem =====
   Estado inicial na classe, estado final em .visivel, e o navegador
   interpola. Sem @keyframes: transition é mais barata e não precisa de nome.
   Só transform e opacity animam, sem exceção.
   A cascata é --i no CSS, nunca setTimeout no JS. */
.entra, .entra-fade, .entra-regua{
  transition-duration:var(--entra);
  transition-timing-function:var(--saida);
  transition-delay:calc(var(--i, 0) * 80ms);
  transition-property:opacity, transform;
}
.entra{opacity:0; transform:translateY(18px)}
.entra-fade{opacity:0}

/* Etiqueta de seção: o rótulo aparece e a régua se desenha da esquerda.
   NADA de clip-path aqui: elemento escondido por clip-path tem área de
   interseção zero, o IntersectionObserver nunca dispara e ele nunca seria
   revelado. Medido — a primeira versão desta regra travava em 1/16. */
.entra-regua{opacity:0}
.entra-regua::after{
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--entra) var(--saida);
  transition-delay:calc(var(--i, 0) * 80ms + 120ms);
}
.entra-regua.visivel::after{transform:scaleX(1)}

.entra.visivel, .entra-fade.visivel, .entra-regua.visivel{opacity:1; transform:none}

/* Sem JS, nada fica escondido esperando uma classe que nunca vem. */
html:not(.js) .entra,
html:not(.js) .entra-fade,
html:not(.js) .entra-regua{opacity:1; transform:none}
html:not(.js) .entra-regua::after{transform:none}

/* ===== Botões ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px;
  border-radius:var(--raio-p);
  border:1.5px solid var(--ouro);
  font:500 15px/1 'Inter', system-ui, sans-serif;
  color:var(--osso);
  background:transparent;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .15s ease, filter .15s ease;
}
.btn:hover{background:color-mix(in srgb, var(--ouro) 12%, transparent)}

.btn--ouro{
  background:var(--ouro);
  color:var(--carbono);
}
.btn--ouro:hover{filter:brightness(.93)}

/* ===== Topo ===== */
.topo{
  position:relative;
  border-bottom:1px solid var(--linha);
}
.topo__barra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:20px;
}
.topo__logo{display:inline-flex; line-height:0}
.topo__logo img{display:block}

.topo__nav{
  display:flex;
  align-items:center;
  gap:32px;
}
.topo__menu{
  display:flex;
  align-items:center;
  gap:28px;
  list-style:none;
  margin:0; padding:0;
  font:500 13px/1 'IBM Plex Mono', ui-monospace, monospace;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.topo__menu a:not(.btn){color:var(--osso); opacity:.8; text-decoration:none}
.topo__menu a:not(.btn):hover{opacity:1}

/* Desktop: grade 1fr auto 1fr com a logo no meio, medida no Hermes. O nav
   vira display:contents pra que os dois <ul> caiam direto nas colunas da
   grade. Cada item tem flex:1, entao os links se espalham em colunas
   iguais em vez de se amontoar perto da logo. */
@media (min-width:720px){
  .topo{border-bottom:none}
  .topo__barra{
    display:grid; grid-template-columns:1fr auto 1fr; column-gap:24px;
    width:min(100% - 2 * max(24px, min(6vw, 80px)), 1080px);
    padding-block:40px 20px;
  }
  .topo__nav{display:contents}
  .topo__logo{grid-column:2; grid-row:1}
  .topo__menu--esq{grid-column:1; grid-row:1}
  .topo__menu--dir{grid-column:3; grid-row:1}
  .topo__menu{gap:24px; font-size:14px; letter-spacing:.1em}
  .topo__menu li{flex:1; white-space:nowrap}
  /* Espelho do lado esquerdo: la os itens encostam na borda esquerda de cada
     coluna, aqui na direita. Sem isso o botao, largo, empurra "Quem faz"
     pra colar na logo. */
  .topo__menu--dir li{text-align:right}
}

.topo__alterna{
  display:none;
  width:40px; height:40px;
  align-items:center;
  justify-content:center;
  padding:0;
  background:transparent;
  border:1px solid var(--linha);
  color:var(--osso);
  cursor:pointer;
  border-radius:var(--raio);
}
.topo__alterna:hover{border-color:var(--aco)}
.topo__icone{
  position:relative;
  display:block;
  width:18px; height:2px;
  background:currentColor;
}
.topo__icone::before,
.topo__icone::after{
  content:'';
  position:absolute;
  left:0;
  width:18px; height:2px;
  background:currentColor;
  transition:transform .15s ease, top .15s ease;
}
.topo__icone::before{top:-6px}
.topo__icone::after{top:6px}
.topo__alterna[aria-expanded="true"] .topo__icone{background:transparent}
.topo__alterna[aria-expanded="true"] .topo__icone::before{top:0; transform:rotate(45deg)}
.topo__alterna[aria-expanded="true"] .topo__icone::after{top:0; transform:rotate(-45deg)}

@media (max-width:719px){
  /* Sem JS: o nav (links + CTA) fica visível, só empilhado. Nada aqui depende de script. */
  .topo__barra{flex-wrap:wrap; row-gap:20px}
  .topo__nav{
    flex-direction:column;
    align-items:stretch;
    gap:20px;
    width:100%;
  }
  .topo__menu{flex-direction:column; align-items:flex-start; gap:16px}

  /* Com JS: a classe .js (aplicada no <html> antes da pintura) autoriza o colapso. */
  html.js .topo__alterna{display:inline-flex}
  html.js .topo__nav{
    display:none;
    position:absolute;
    inset-inline:0;
    top:100%;
    padding:24px 20px 28px;
    background:var(--grafite);
    border:1px solid var(--linha);
    border-top:none;
    border-radius:var(--raio);
  }
  html.js .topo.menu-aberto .topo__nav{display:flex}
}

/* ===== Hero ===== */
/* Esquema medido na hero do hermes-agent.nousresearch.com: texto na
   esquerda, imagem na direita, titulo no clamp(3.25rem, 8.2vw, 108px) de la.
   overflow:hidden segura a foto quando o parallax a empurra pra baixo. */
.hero{padding-block:clamp(56px, 9vw, 120px); overflow:hidden}
.hero__conteudo{max-width:760px}
.hero .rotulo{margin:0 0 20px}
.hero .t1, .secao .t1{margin-bottom:28px; font-size:clamp(3.5rem, 17vw, 5.5rem)}
.hero__olhos{position:relative; will-change:transform}
.hero__foto img{display:block; width:100%; height:auto}
/* Empilhada, a foto quadrada e quase toda preto em volta dos olhos: o
   recorte 2:1 guarda so a faixa deles. */
@media (max-width:899px){
  .hero__foto img{aspect-ratio:2 / 1; object-fit:cover}
}

/* Brilho vivo nos olhos: estrela de quatro raios (dois gradientes em cruz,
   um reto e um a 45 graus) sobre um halo, somados à arte com screen. Os
   centros foram medidos nos pixels brancos do olhos.jpg (736px): esquerdo
   em 248,351 e direito em 596,345. No recorte 2:1 do celular a foto perde
   184px em cima, então o top muda. Os dois olhos pulsam fora de fase. */
.hero__brilho{position:absolute; left:33.7%; top:47.7%; width:12%; aspect-ratio:1;
  translate:-50% -50%; mix-blend-mode:screen; pointer-events:none;
  animation:brilho-pulsa 2.8s ease-in-out infinite}
.hero__brilho--dir{left:81%; top:46.8%; animation-delay:-1.1s; animation-duration:3.2s}
@media (max-width:899px){
  .hero__brilho{top:45.3%}
  .hero__brilho--dir{top:43.6%}
}
.hero__brilho::before, .hero__brilho::after{content:""; position:absolute; inset:0}
.hero__brilho::before{border-radius:50%;
  background:radial-gradient(circle, #fff 0 4%, rgb(255 255 255 / .55) 10%, rgb(210 225 255 / .18) 30%, transparent 62%)}
.hero__brilho::after{
  background:
    linear-gradient(to right, transparent, #fff 50%, transparent) center / 100% 2px no-repeat,
    linear-gradient(to bottom, transparent, #fff 50%, transparent) center / 2px 100% no-repeat;
  animation:brilho-gira 2.8s ease-in-out infinite; animation-delay:inherit; animation-duration:inherit}
@keyframes brilho-pulsa{
  0%, 100%{opacity:.55; scale:.7}
  45%{opacity:1; scale:1.15}
  55%{opacity:.9; scale:1}
}
@keyframes brilho-gira{
  0%, 100%{rotate:0deg; scale:.6 .6}
  45%{rotate:45deg; scale:1.2 1.2}
}
@media (prefers-reduced-motion: reduce){
  .hero__brilho, .hero__brilho::after{animation:none}
}

@media (min-width:900px){
  .hero{padding-block:clamp(24px, 4vw, 56px)}
  .hero__grade{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px}
  .hero .t1, .secao .t1{font-size:clamp(3.25rem, 8.2vw, 108px)}
}
.hero__texto{margin:0; font-weight:700}

/* ===== Seção (ritmo vertical padrão, a partir daqui) ===== */
/* Titulo e texto de secao com linhas de largura parecida: balance divide o
   titulo por igual (nada de "DO" sozinho numa linha) e pretty tira a palavra
   orfa do fim do paragrafo. Nativo do navegador; onde nao existe, nada muda. */
.secao .t1{text-wrap:balance}
.secao p{text-wrap:pretty}

.secao{
  padding-block:clamp(64px, 10vw, 120px);
}

/* ===== Rótulo grande (usado na hero) ===== */
/* Rótulo em cima de todo título: ouro com o mesmo neon da palavra marcada
   (.t1__marca), a pedido do Kauã em 22/09. */
.rotulo--grande{margin:0 0 16px; font-size:clamp(15px, 1.6vw, 18px); font-weight:700;
  color:var(--ouro); text-shadow:0 0 24px rgb(255 197 49 / .35)}

/* ===== Simulação de busca =====
   A janela de resultados do comparador ("Procuraram no Google").
   Uma ilustração feita com a paleta da marca: grafite, linha fina, zero sombra.
   O ouro só aparece no botão de WhatsApp do "seu negócio" já resolvido. */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

.campo{
  display:flex; align-items:center; gap:12px; padding:14px 20px; margin:0 0 14px;
  border:1px solid var(--borda-forte); border-radius:var(--raio-p); background:rgb(236 237 232 / .04);
  font:500 clamp(16px, 1.7vw, 19px)/1.2 'Inter', system-ui, sans-serif; color:var(--osso);
}
.campo svg{flex:none; width:20px; height:20px; color:var(--aco)}
.lista{list-style:none; margin:0; padding:0; display:grid; gap:10px}

/* Todas as linhas têm a mesma altura (min-height maior que o conteúdo): o
   comparador empilha duas listas em ordens diferentes e elas têm que alinhar. */
.res{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:4px 16px;
  min-height:92px; padding:14px 16px;
  border:1px solid var(--borda); border-radius:var(--raio); background:var(--sup);
}
.res__av{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--carbono); border:1px solid var(--linha);
  font:700 18px/1 'Inter', system-ui, sans-serif; color:var(--osso);
}
.res__info{min-width:0}
.res__info p{margin:0; max-width:none}
.res__nome{font:700 16px/1.3 'Inter', system-ui, sans-serif; color:var(--osso)}
.res__meta, .res__hora{font:400 13px/1.45 'Inter', system-ui, sans-serif; color:var(--aco)}
.res__nota{color:var(--osso); font-weight:500}
.res__hora b{color:var(--sucesso); font-weight:500}
.res__acoes{display:flex; gap:8px}
.res__btn{
  display:inline-flex; align-items:center; padding:7px 14px; white-space:nowrap;
  border:1px solid var(--borda-forte); border-radius:var(--raio-p);
  font:500 12px/1 'Inter', system-ui, sans-serif; color:var(--osso);
}
.res__btn--ouro{background:var(--ouro); border-color:var(--ouro); color:var(--carbono); font-weight:700}
.res--sumido{border-style:dashed; background:transparent}
.res--sumido .res__av{border-style:dashed; color:var(--aco)}
.res--sumido .res__nome{color:var(--aco)}
.res__erro{display:flex; align-items:center; gap:8px; font:500 12px/1.3 'IBM Plex Mono', ui-monospace, monospace; color:var(--aco)}
.res__erro::before{content:""; flex:none; width:8px; height:8px; border-radius:50%; background:#E5484D}
.res--seu{border-color:var(--borda-forte); background:rgb(236 237 232 / .06)}

@media (max-width:599px){
  /* Sem espaço pro botão ao lado: ele desce pra baixo do texto, e a linha ganha altura. */
  .res{grid-template-columns:auto 1fr; min-height:124px}
  .res__acoes{grid-column:2}
}

/* ===== Trabalhamos com =====
   Numa linha só, no tamanho da abertura (mesmo clamp do .intro__palco).
   Sem .nichos--anima (sem JS, sem GSAP ou com movimento reduzido) é uma frase
   corrida: .nichos__vaga não gera caixa própria (display:contents) e
   .nichos__medida (a régua de medida) fica fora do fluxo, então sobra só o
   rótulo seguido de cada nicho, na mesma frase.
   Com ela, "Trabalhamos com:" e a vaga viram os dois itens de uma linha (flex,
   nowrap: não quebra) e só a vaga troca de conteúdo. .nichos__medida entra em
   fluxo dentro da vaga (invisível, mas ocupando espaço) com o maior nicho,
   "Barbearias.": é ela quem dá à vaga uma linha de verdade, com largura e
   linha de base — os nichos reais empilham por cima, em position:absolute,
   exatamente onde a régua está. Sem a régua, a vaga só teria filhos fora do
   fluxo, sem base pra alinhar com o rótulo (o desalinhamento do print). */
.nichos{position:relative; background:var(--carbono)}
.nichos__palco{
  position:relative; display:flex; flex-direction:column; align-items:center;
  padding:clamp(64px, 10vw, 120px) 20px; overflow:hidden;
}
.nichos__fundo{
  position:absolute; inset:-25% 0; pointer-events:none;
  background:radial-gradient(ellipse 55% 40% at 50% 50%, rgb(255 255 255 / .07) 0%, transparent 70%);
}
.nichos__titulo{
  position:relative; width:min(100%, 1000px); text-align:center;
  font-size:clamp(2.2rem, 6vw, 5.5rem); letter-spacing:-.01em;
}
/* Só o nicho é negrito (o .t1 já é 700); "Trabalhamos com" fica mais leve, de propósito. */
.nichos__fixo{font-weight:300}
.nichos__vaga{display:contents}
.nichos__medida{display:none}
.nichos__n{display:inline}

.nichos--anima .nichos__palco{height:100vh; justify-content:center; padding-block:0}
.nichos--anima .nichos__titulo{
  display:flex; flex-wrap:nowrap; white-space:nowrap;
  justify-content:center; align-items:baseline; column-gap:.28em;
}
.nichos--anima .nichos__vaga{position:relative; display:inline-block; text-align:left}
.nichos--anima .nichos__medida{display:inline-block; visibility:hidden}
.nichos--anima .nichos__n{position:absolute; left:0; top:0; display:block; margin:0}

/* Igual à abertura: em tela estreita a fonte encolhe pra continuar numa linha
   só, em vez de quebrar. */
@media (max-width:899px){
  .nichos--anima .nichos__titulo{font-size:clamp(1.5rem, 7.6vw, 2.6rem)}
}
@media (max-width:420px){
  .nichos--anima .nichos__titulo{font-size:5.8vw}
}

/* ===== As mãos =====
   Três camadas: o palco é preto (o blackout); por cima, o papel (#f4f3ef, o tom
   quente pedido na referência, com trama pontilhada), que só aparece dentro
   de uma máscara de luz — uma elipse centrada na fresta entre os dedos, de raio
   --r; e dentro do papel, as mãos em multiply (o branco da imagem vira a cor do
   papel, só o ponto preto fica). O GSAP anima --r, a opacidade do papel e da
   textura, e as mãos chegando ao centro. Sem ele, os valores de repouso abaixo
   já são a cena final: papel inteiro, textura, mãos no lugar.
   Mãos e textura são pontilhado ordenado (Bayer 8x8) em 4 tons de cinza — a
   mesma técnica da referência, vista de perto: o ponto é cinza, não preto chapado. Os arquivos são pequenos de propósito (cada ponto é um
   pixel) e a tela sempre amplia: pixelated amplia sem suavizar, e o ponto
   continua ponto em vez de virar borrão cinza.
   As duas imagens têm a mesma altura (185 px), então as duas usam a mesma
   altura no CSS e ficam na mesma escala; a de robô encosta pela direita no
   centro e a humana pela esquerda — a fresta cai exatamente no meio da tela.
   --altura das mãos: 23,1vw é o que dá 50vw pra cada mão (a composição da
   referência, de ponta a ponta); em tela alta e estreita (celular, tablet em
   pé) o 19vh ganha, as mãos crescem e os braços saem pelas bordas, mas as
   pontas dos dedos continuam no centro. Fica no papel porque a textura também
   usa: um ponto da textura tem o tamanho de um ponto das mãos. */
/* Sem fundo próprio: o preto é o do body. Assim, quando a cena anima, a seção
   sobe meia tela por cima do fim do celular (margem negativa), e a luz nasce
   enquanto ele sai, sem uma tela inteira de preto vazio no meio. Sem animação
   não há encavalamento. */
.maos{position:relative}
.ve--anima + .maos{margin-top:-50vh}
.maos__palco{position:relative; height:100vh; overflow:hidden}
.maos__papel{
  --r:140%; --cy:54%; --altura:max(23.1vw, 19vh);
  position:absolute; inset:0; background:#f4f3ef;
  -webkit-mask-image:radial-gradient(ellipse 62% 56% at 50% var(--cy), #000 var(--r), transparent calc(var(--r) + 28%));
          mask-image:radial-gradient(ellipse 62% 56% at 50% var(--cy), #000 var(--r), transparent calc(var(--r) + 28%));
}
/* O multiply fica no par, não em cada imagem: o GSAP mexe no par (transform) e
   transform cria um grupo isolado — dentro dele a imagem não enxerga o papel. O
   par inteiro, sim, se mistura com o papel. As duas imagens não se sobrepõem,
   então dentro do grupo não há o que misturar. A margem negativa sobe o par até
   as pontas dos dedos (a 45% da altura da imagem) caírem em --cy; é margem, e
   não translate, porque o GSAP assume o translate de quem ele anima. */
.maos__par{
  position:absolute; left:0; right:0; top:var(--cy, 54%); height:var(--altura);
  margin-top:calc(var(--altura) * -.45); mix-blend-mode:multiply;
}
.maos__mao{position:absolute; top:0; height:100%; width:auto; max-width:none; image-rendering:pixelated; will-change:transform}
.maos__mao--robo{right:50%}
.maos__mao--humana{left:50%}
/* Trama do papel, como o fundo da referência: uma grade de pontos cinza-claros
   no papel todo e nuvens mais densas por cima. Ladrilho de 512 pontos que emenda
   sem costura, no mesmo tamanho de ponto das mãos (a --altura é de 185 pontos),
   com os tons já prontos (por isso opacidade 1). Some num clarão em volta da
   fresta entre os dedos, como na referência: é a luz entre as duas mãos. */
.maos__grao{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:url(../img/maos/papel-trama.png) 50% 50% / calc(var(--altura) * 512 / 185) auto;
  image-rendering:pixelated;
  -webkit-mask-image:radial-gradient(ellipse 18% 26% at 50% var(--cy), transparent 30%, #000 100%);
          mask-image:radial-gradient(ellipse 18% 26% at 50% var(--cy), transparent 30%, #000 100%);
}
/* A frase, no papel limpo acima das mãos. Fica fora do .maos__papel porque ele
   é role="img" e esconderia o título do leitor de tela. Ouro no papel claro dá
   ~1,4:1 e não lê, então o destaque é o peso, como em "Trabalhamos com": a
   primeira linha fina, a segunda em 700. */
.maos__titulo{
  position:absolute; left:0; right:0; top:12%; padding-inline:16px;
  text-align:center; color:var(--grafite); font-size:clamp(1.9rem, 5vw, 4.25rem); text-wrap:balance;
}
.maos__l{display:block}
/* Título em cima, fino, com só o destaque em negrito; slogan pequeno embaixo,
   todo em negrito (a pedido do Kauã em 27/09). */
.maos__l--1{font-weight:300}
.maos__l--1 b{font-weight:700}
.maos__l--2{margin-top:14px; font:700 clamp(16px, 1.6vw, 20px)/1.4 'Inter', system-ui, sans-serif; text-transform:none; letter-spacing:0}
/* A nota da automação, no papel abaixo das mãos. O rótulo sai do aço pro
   grafite: aço no papel claro dá ~2,7:1, pouco pra letra de 13px. */
.maos__nota{
  position:absolute; left:0; right:0; bottom:9%; margin:0 auto; padding-inline:16px;
  max-width:calc(46ch + 32px); text-align:center; color:var(--grafite); text-wrap:balance;
  font-weight:700;
}
.maos__rotulo{display:block; margin-bottom:10px; color:inherit}

/* ===== Comparador: Procuraram no Google =====
   A camada "com" fica por cima e é cortada pela linha (--x, escrita pelo JS a
   cada movimento do input). O input cobre a janela e é invisível. */
/* Título e texto no centro, no eixo da janela do comparador (a pedido do Kauã em 27/09). */
.comparar .t1{margin-bottom:16px; font-size:clamp(2.75rem, 6vw, 5rem); text-align:center}
.comparar__sub{margin:0 auto; color:var(--aco); font-weight:500; text-align:center}
.comparar__palco{margin-top:clamp(32px, 4vw, 56px)}
.comparar__rotulos{
  display:flex; justify-content:space-between; width:min(100%, 760px); margin:0 auto 12px;
  font:500 13px/1 'IBM Plex Mono', ui-monospace, monospace; text-transform:uppercase; letter-spacing:.09em; color:var(--aco);
}
.comparar__rotulos span:last-child{color:var(--ouro)}
.comparar__janela{
  --x:50%; position:relative; width:min(100%, 760px); margin:0 auto; overflow:hidden;
  border:1px solid var(--borda); border-radius:var(--raio-g); background:var(--grafite); touch-action:pan-y;
}
.comparar__camada{padding:16px}
.comparar__camada--com{position:absolute; inset:0; background:var(--grafite); clip-path:inset(0 0 0 var(--x))}
.comparar__linha{position:absolute; top:0; bottom:0; left:var(--x); width:2px; margin-left:-1px; background:var(--osso); pointer-events:none}
.comparar__linha::after{
  content:"↔"; position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px;
  display:grid; place-items:center; border-radius:50%; background:var(--carbono); border:2px solid var(--osso);
  font:500 18px/1 'Inter', system-ui, sans-serif; color:var(--osso);
}
.comparar__range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize}
.comparar__janela:has(.comparar__range:focus-visible){outline:2px solid var(--ouro); outline-offset:3px}

/* ===== Celular (poses) =====
   O celular é um iPhone 14 Pro real. O mockup traz cada ângulo como uma imagem,
   só a moldura, com fundo transparente e um furo na tela, e girar uma imagem
   chapada em 3D dá cara de folha. Então o celular gira trocando de pose: a tela
   (o site num quadro de 390 x 837, em px do site) é uma só, e as molduras ficam
   por cima dela. .pose--f (de frente, 738 x 1448, o tamanho nativo da imagem) é a
   que vem no HTML; o site.js copia ela pras outras (5 = inclinado, 3 = quase de
   lado, 3m = o mesmo, do outro lado). A tela mede 645 x 1384 na moldura de frente,
   começando em 35,37: essa é a matrix3d de repouso. Com o GSAP rodando, o site.js
   refaz o transform da tela e o de cada moldura a cada quadro, pra tela caber no
   quadrilátero do momento (os cantos da tela de cada ângulo vêm do PSD). */
.pose{position:absolute; left:0; top:0; transform-origin:0 0}
.pose__tela{
  position:absolute; left:0; top:0; width:390px; height:837px; border-radius:46px; overflow:hidden; transform-origin:0 0;
  transform:matrix3d(1.653846,0,0,0,0,1.653524,0,0,0,0,1,0,35,37,0,1);
}
.pose__img{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none}
.pose--f{width:738px; height:1448px}
.pose--5{width:827px; height:1497px}
.pose--3, .pose--3m{width:673px; height:1652px}
.pose--3m .pose__img{scale:-1 1}
/* ===== Você vê antes de decidir =====
   O celular tem um site só, e o data-passo (1, 2, 3) muda como ele se
   apresenta: 1 = esqueleto (o texto vira barra cinza, a cor some), 2 = a marca
   entra (fundo claro, ouro no botão), 3 = pronto. O texto de cada .b vira
   barra por color:transparent + background: a barra tem a largura do texto.
   As variáveis mudam na hora e as transições (color, background) animam. */
.ve{position:relative; background:var(--carbono)}
.ve__palco{
  position:relative; display:grid; gap:clamp(24px, 4vw, 64px); align-items:center;
  padding:clamp(64px, 10vw, 120px) max(20px, calc((100% - var(--env)) / 2));
  overflow:hidden;
}
.ve__linhas{font-size:clamp(2.5rem, 5.6vw, 4.75rem); text-wrap:balance}
.ve__l{display:block}
.ve__l + .ve__l{margin-top:.45em}

.ve__cena{position:relative; display:grid; place-items:center}
.ve__brilho{
  position:absolute; width:min(100%, 560px); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgb(255 255 255 / .08), transparent 65%);
}
.ve__fone{position:relative; width:738px; height:1448px; zoom:.43}
.ve__tela{
  --fundo:var(--osso); --barra:transparent; --txt:#0b0c0e; --tinta:#0b0c0e;
  --blocos:#d3d5cd; --btn:var(--ouro); --mapa:1;
  container-type:inline-size; background:var(--fundo); transition:background-color .5s;
}
/* Faixa da barra de status: o site rola por baixo dela, sem aparecer ao lado da ilha. */
.ve__tela::after{content:""; position:absolute; inset:0 0 auto; height:50px; background:var(--fundo); transition:background-color .5s}
@media (max-width:899px){.ve__fone{zoom:.38}}
@media (max-height:760px){.ve__fone{zoom:.32}}
[data-passo="1"] .ve__tela{--fundo:#14161b; --barra:#262a33; --txt:transparent; --tinta:#333844; --blocos:#1c1f26; --btn:#262a33; --mapa:0}
[data-passo="2"] .ve__tela{--barra:rgb(11 12 14 / .12); --txt:transparent; --tinta:rgb(11 12 14 / .3)}

.ve__dentro{font-size:4.7cqw; line-height:1.3; color:var(--txt)}
.b{
  display:block; width:fit-content; max-width:100%; border-radius:.35em;
  color:var(--txt); background-color:var(--barra); transition:color .5s, background-color .5s;
}
[data-passo="1"] .b{animation:ve-pulsa 1.4s ease-in-out infinite}
@keyframes ve-pulsa{50%{opacity:.5}}

.ve__topo{display:flex; align-items:center; gap:.7em; padding:2.9em 1.1em 1em; font-weight:700}
.ve__logo{flex:none; width:2em; height:2em; border-radius:50%; background:var(--ouro); transition:background-color .5s}
[data-passo="1"] .ve__logo{background:#262a33}
.ve__menu{margin-left:auto; display:grid; gap:.3em; width:1.5em}
.ve__menu i{height:2px; background:var(--tinta); transition:background-color .5s}

.ve__hero{padding:.6em 1.1em 0}
.ve__aberto{font-size:.8em; font-weight:500}
.ve__h{margin:.5em 0 .4em; font:700 2.3em/1.02 'Barlow Condensed', 'Inter', system-ui, sans-serif; text-transform:uppercase; letter-spacing:-.01em}
.ve__p{margin:0 0 1.1em; font-size:.95em}
.ve__btn{display:inline-block; padding:.85em 1.4em; border-radius:var(--raio-p); background:var(--btn); font-weight:700; transition:background-color .5s}
.ve__btn .b{background:none}

.ve__mapa{
  position:relative; margin:1.4em 1.1em; aspect-ratio:16 / 10; border-radius:.9em; overflow:hidden;
  background:var(--blocos); transition:background-color .5s;
}
.ve__mapa::before{
  content:""; position:absolute; inset:0; opacity:var(--mapa); transition:opacity .5s;
  background:
    repeating-linear-gradient(90deg, transparent 0 22%, rgb(11 12 14 / .12) 22% calc(22% + 2px)),
    repeating-linear-gradient(0deg, transparent 0 30%, rgb(11 12 14 / .12) 30% calc(30% + 2px));
}
.ve__mapa::after{
  content:""; position:absolute; top:44%; left:56%; width:1.3em; height:1.3em; translate:-50% -50%;
  border-radius:50%; background:var(--ouro); border:.3em solid #0b0c0e; opacity:var(--mapa); transition:opacity .5s;
}
.ve__info{display:grid; padding:0 1.1em 2.4em}
.ve__linha{display:grid; gap:.25em; padding:.85em 0; border-top:1px solid var(--tinta); transition:border-color .5s}
.ve__k{font-size:.72em; font-weight:500; text-transform:uppercase; letter-spacing:.08em}
.ve__linha .b:last-child{font-weight:600}

@media (min-width:900px){
  .ve__palco{grid-template-columns:1.2fr 1fr}
}

/* Com o GSAP (classe posta pelo JS): o palco tem a altura da tela, é preso e as
   três frases dividem o mesmo lugar, uma de cada vez. */
.ve--anima .ve__palco{height:100vh; align-content:center; padding-block:24px}
.ve--anima .ve__linhas{display:grid}
.ve--anima .ve__l{
  grid-area:1 / 1; margin:0; opacity:0; translate:0 .5em;
  transition:opacity .5s var(--saida), translate .5s var(--saida);
}
.ve--anima[data-passo="1"] .ve__l--1,
.ve--anima[data-passo="2"] .ve__l--2,
.ve--anima[data-passo="3"] .ve__l--3{opacity:1; translate:0 0}
.ve--anima[data-passo="2"] .ve__l--1,
.ve--anima[data-passo="3"] .ve__l--1,
.ve--anima[data-passo="3"] .ve__l--2{translate:0 -.5em}

/* ===== Portal (entrada das redes sociais) =====
   O mural só aparece por dentro das letras: o clip-path do campo aponta pro
   clipPath de texto do SVG, que o site.js escala e move. É a exceção à regra
   do clip-path: aqui nada depende do IntersectionObserver. O mural cresce 16%
   enquanto a câmera entra. Sem JS a seção some: sem a medição, o mural
   apareceria inteiro, sem palavra. */
html:not(.js) .portal{display:none}
.portal__palco{position:relative; height:100vh; overflow:hidden}
/* Sobe meia tela por cima do fim do "Trabalhamos com você" (o palco não tem
   fundo, fora da palavra é transparente): a palavra entra enquanto o "você"
   sai, sem uma tela de preto vazio entre as duas. */
.nichos--anima + .portal{margin-top:-50vh}
.portal__svg{position:absolute; width:0; height:0}
.portal__glifo{font:700 100px 'Barlow Condensed', 'Inter', system-ui, sans-serif; font-kerning:none; letter-spacing:0}
.portal__campo{position:absolute; inset:0; clip-path:url(#portal-clip)}
/* O contorno: a mesma palavra, no mesmo lugar, só que traçada por cima do
   mural. Acende quando a seção entra e apaga quando a câmera começa a andar —
   ouro esticado na tela inteira vira parede. non-scaling-stroke segura o fio
   fino: sem ele o traço engorda junto com o zoom e tapa a palavra. */
.portal__traco{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.portal__contorno{fill:none; stroke:var(--ouro); stroke-width:2px}
.portal__mural{position:absolute; inset:0; display:grid; grid-template-columns:repeat(auto-fill, 180px); gap:16px; place-content:center}
.portal__mural .post{--w:180px}

/* ===== Design pra redes sociais =====
   O carrossel: uma fileira de slides 4:5 (.post) dentro de uma janela que corta
   nas bordas da tela. O trilho começa e termina no alinhamento do .env. Sem o
   GSAP a janela rola pro lado com o dedo, parando slide a slide. O texto dos
   slides é em cqw: cresce e encolhe com o slide, que tem a largura limitada
   pela altura da tela pra caber inteiro quando o palco fica preso. */
/* A largura do card mora na seção porque o trilho também precisa dela: é ela
   que centraliza o primeiro e o último (padding de meia janela menos meio card). */
.posts{--w:max(200px, min(78vw, 360px, (100svh - 320px) * .8))}
.posts__palco{padding-block:clamp(64px, 10vw, 120px)}
.posts .rotulo{margin:0 0 16px}
.posts .t1{margin-bottom:16px; text-wrap:balance}
.posts__sub{margin:0; color:var(--aco)}
.posts__janela{
  margin-top:clamp(28px, 4vw, 48px); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-inline:max(20px, calc((100% - var(--env)) / 2));
  /* O giro em Y dos cards (site.js) só tem volume com perspectiva aqui. */
  perspective:1600px;
}
.posts__trilho{
  display:flex; gap:clamp(12px, 2vw, 24px); width:max-content; margin:0; list-style:none;
  padding:0 calc(50% - var(--w) / 2);
}
.post{
  position:relative; flex:none; display:flex; flex-direction:column; justify-content:flex-end; scroll-snap-align:center;
  width:var(--w); aspect-ratio:4 / 5; padding:calc(var(--w) * .16) calc(var(--w) * .08) calc(var(--w) * .07);
  border-radius:var(--raio); container-type:inline-size; background:var(--osso); color:#0b0c0e;
}
.post--escuro{background:var(--grafite); color:var(--osso); border:1px solid var(--borda-forte)}
/* Capa e CTA levam foto, e cada um diz qual em --foto (no HTML, com caminho
   absoluto: url() dentro de variável resolve a partir deste .css, não da
   página). O degradê escurece de cima pra baixo pra sobrar contraste embaixo,
   onde mora o título. Sem ele o texto some na luz da imagem. */
.post--foto{
  background:
    linear-gradient(to bottom, rgb(11 12 14 / .15) 0%, rgb(11 12 14 / .35) 40%, rgb(11 12 14 / .9) 70%, rgb(11 12 14 / .97) 100%),
    var(--foto, none) center / cover no-repeat,
    var(--grafite);
}
.post__pag{
  position:absolute; top:6cqw; right:6cqw; padding:.5em .9em; border-radius:var(--raio-p);
  font:500 3.4cqw/1 'IBM Plex Mono', ui-monospace, monospace; background:rgb(11 12 14 / .7); color:var(--osso);
}
/* Selo da marca na capa e no CTA — o design-guide manda a marca aparecer nesses dois. */
.post__selo{position:absolute; top:6cqw; left:6cqw; width:8cqw; height:auto; display:block; z-index:1}
/* Na capa e no CTA o selo já ocupa o canto: o número desce um pouco pra não brigar. */
.post__selo ~ .post__n{top:17cqw}
/* O contraste da identidade: título grande com kerning apertado, etiqueta mono
   pequena com kerning aberto. É esse par que faz o card parecer desenhado. */
.post__kicker{
  font:500 3.1cqw/1 'IBM Plex Mono', ui-monospace, monospace;
  text-transform:uppercase; letter-spacing:.22em; opacity:.6;
}
.post__regua{display:block; width:13cqw; height:.8cqw; margin:2.6cqw 0 3.6cqw; background:var(--ouro); border-radius:99px}
/* O número vira elemento gráfico, no vazio do topo (o texto mora embaixo):
   preenche a composição sem nunca encostar na leitura. */
.post__n{
  position:absolute; top:9cqw; left:6cqw; margin:0; pointer-events:none;
  font:700 30cqw/.78 'Barlow Condensed', 'Inter', system-ui, sans-serif; opacity:.1;
}
.post__h{margin:0; font:700 12cqw/.95 'Barlow Condensed', 'Inter', system-ui, sans-serif; text-transform:uppercase; letter-spacing:-.035em}
.post--escuro:first-child .post__h{font-size:13.5cqw}
/* Palavra marcada não quebra no meio: "CHECK-" numa linha e "UP." na outra é
   erro de diagramação, não estilo. */
.post__h .t1__marca{white-space:nowrap}
/* Ouro em texto só sobre fundo escuro. No card claro vira marca-texto (tinta
   escura sobre ouro): ouro sobre osso dá ~1,4:1 e o guia proíbe. */
.post:not(.post--escuro) .post__h .t1__marca{
  color:#0b0c0e; background:var(--ouro); padding:0 .1em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; text-shadow:none;
}
.post__p{margin:.7em 0 0; font-size:4.8cqw; line-height:1.35; opacity:.7}
.post__btn{
  align-self:flex-start; margin-top:7cqw; padding:.9em 1.3em; border-radius:var(--raio-p);
  font:700 4.4cqw/1 'Inter', system-ui, sans-serif; background:var(--ouro); color:#0b0c0e;
}
.post__pe{
  display:flex; justify-content:space-between; margin:6cqw 0 0; padding-top:3.4cqw;
  border-top:1px solid rgb(11 12 14 / .16); opacity:.6;
  font:500 3.4cqw/1 'IBM Plex Mono', ui-monospace, monospace; text-transform:uppercase; letter-spacing:.09em;
}
.post--escuro .post__pe{border-top-color:rgb(236 237 232 / .18)}
.posts__pontos{display:none; justify-content:center; gap:8px; margin-top:20px}
.posts__pontos i{width:6px; height:6px; border-radius:50%; background:var(--osso); opacity:.25; transition:opacity var(--rapido)}
.posts__pontos .aceso{opacity:1}

/* Com o GSAP (classe posta pelo JS): o palco tem a altura da tela e é preso; a
   janela não rola mais, quem anda é o trilho. */
.posts--anima .posts__palco{height:100vh; display:grid; align-content:center; padding-block:24px}
.posts--anima .posts__janela{overflow:hidden}
.posts--anima .posts__pontos{display:flex}

/* ===== Trabalhos =====
   A vitrine: janela de navegador grande com o print do site do cliente e, por
   cima dela, o celular. O print é a página inteira, mais alta que a moldura
   (overflow:hidden); o GSAP anda com ele. A moldura tem proporção fixa, então
   o quanto o print precisa subir é sempre o mesmo em porcentagem. */
.trabalhos .rotulo{margin:0 0 16px}
.trabalhos .t1{margin-bottom:0}
.vt{display:grid; gap:clamp(24px, 3vw, 40px); margin-top:clamp(56px, 8vw, 104px)}
.vt__topo{display:grid; gap:20px 48px; align-items:end}
.vt__topo .rotulo{margin:0 0 10px}
.vt__nome{margin:0; font:700 clamp(2.75rem, 6vw, 4.5rem)/1 'Barlow Condensed', 'Inter', system-ui, sans-serif; text-transform:uppercase; letter-spacing:-.02em}
.vt__frase{margin:0; font-size:clamp(17px, 1.6vw, 20px); line-height:1.45; color:var(--aco)}
.vt__frase span{display:block}
.vt__frase .vt__fato{color:var(--osso); font-weight:700}
.vt__frase .vt__agora{margin-top:.6em; color:var(--osso)}
.vt__antes::before{content:""; display:inline-block; width:8px; height:8px; margin-right:10px; border-radius:50%; background:#E5484D}
@media (min-width:900px){
  .vt__topo{grid-template-columns:1fr 1fr}
}

.vt__visual{position:relative; margin-bottom:clamp(0px, 4vw, 56px)}
.vt__janela{border:1px solid var(--borda-forte); border-radius:var(--raio-g); overflow:hidden; background:var(--grafite)}
.vt__barra{display:flex; gap:7px; align-items:center; height:34px; padding-inline:16px; border-bottom:1px solid var(--borda)}
.vt__barra i{width:9px; height:9px; border-radius:50%; background:rgb(236 237 232 / .2)}
.vt__tela{overflow:hidden}
.vt__janela .vt__tela{position:relative; aspect-ratio:16 / 9.4}
/* O site do cliente ao vivo: 1280 px de largura na janela (encolhido por --k, que o
   site.js mede) e 390 no celular. Sem clique, ele não recebe mouse nem roda. */
.vt__vivo{position:absolute; left:0; top:0; border:0; background:var(--osso); transform-origin:0 0; pointer-events:none}
.vt__janela .vt__vivo{width:1280px; height:752px; scale:var(--k, .875)}
.vt__fone .vt__vivo{width:390px; height:837px}
.vt__toque{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:0 0 18px; border:0; background:transparent; cursor:pointer}
.vt__toque .rotulo{padding:9px 16px; border-radius:var(--raio-p); background:rgb(0 0 0 / .72); color:var(--osso)}
.vt__janela--ativa .vt__vivo{pointer-events:auto}
.vt__janela--ativa .vt__toque{display:none}

/* O celular é o mesmo da seção anterior (poses, acima): o print do celular, num
   quadro de 390 x 837, por baixo da moldura. */
.vt__fone{position:absolute; right:2%; bottom:-9%; width:738px; height:1448px; zoom:.37}
.vt__fone .vt__tela{background:var(--osso)}
/* Celular: a janela grande não cabe legível, então sobra só o aparelho, no meio. */
@media (max-width:699px){
  .vt__janela{display:none}
  .vt__fone{position:relative; inset:auto; margin-inline:auto; zoom:.4}
}

/* ===== Contato =====
   No celular é uma
   coluna só, com a conversa entre o texto e o botão (ela explica o que o botão
   faz antes de ele aparecer); a partir de 900 px a conversa vai pra direita,
   ocupando a altura toda, e o texto fica centrado na vertical ao lado dela. */
/* A seção cobre a tela inteira e o fundo (shader, js/fundo.js) cobre a seção
   inteira, de ponta a ponta, a pedido do Kauã em 27/09 (antes uma máscara
   apagava os 30% de cima). A grade cresce até o fim da seção, então as linhas
   1fr dela centram o conteúdo na altura. */
.contato{position:relative; min-height:100vh; display:flex; flex-direction:column}
.contato__fundo{position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none}
.contato__grade{position:relative; flex:1}
.contato .t1{margin-bottom:20px}
.contato__sub{margin:0; max-width:52ch; color:var(--aco); font-size:clamp(17px, 1.7vw, 20px)}
.contato__acao{margin:clamp(28px, 4vw, 44px) 0 0}
.contato__acao .btn{padding:19px 34px; font-size:16px}
.contato__assina{margin:clamp(56px, 8vw, 96px) 0 0}
@media (min-width:900px){
  .contato__grade{
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 440px); column-gap:clamp(48px, 7vw, 112px);
    grid-template-rows:1fr auto auto auto 1fr auto;
    grid-template-areas:
      ".      zap"
      "titulo zap"
      "sub    zap"
      "acao   zap"
      ".      zap"
      "assina assina";
  }
  .contato__grade > .t1{grid-area:titulo}
  .contato__sub{grid-area:sub}
  .contato__acao{grid-area:acao}
  .contato__assina{grid-area:assina}
  .zap{grid-area:zap; margin:0}
}

/* A conversa, em balões soltos que flutuam na página. Na paleta da marca, não
   nas cores do WhatsApp: o balão de quem chama é osso, o da v0n é grafite com
   borda (zero sombra), e os tiques de enviado são cinza (o azul do lido é cor
   proibida). Três movimentos, cada um num elemento, pra não brigarem pelo
   transform: o bloco inteiro anda com a rolagem (data-parallax, GSAP); cada
   item boia sozinho (CSS, fases diferentes); e cada balão/avatar/"digitando"
   entra em pop (GSAP, site.js). Os balões ocupam o lugar deles mesmo
   invisíveis, então nada empurra nada enquanto a conversa acontece. Sem JS o
   "digitando" fica escondido e os balões aparecem prontos. */
.zap{
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  width:min(100%, 440px); margin:clamp(32px, 5vw, 48px) 0;
  font:var(--peso-texto) 15px/1.45 'Inter', system-ui, sans-serif;
}
.zap p{margin:0; max-width:none}
.zap__item{position:relative; display:flex; align-items:flex-end; gap:10px; animation:zap-boia 5.2s ease-in-out infinite}
.zap__item:nth-child(3n+2){animation-duration:6.1s; animation-delay:-2.2s}
.zap__item:nth-child(3n+3){animation-duration:5.6s; animation-delay:-3.8s}
@keyframes zap-boia{50%{translate:0 -7px}}
.zap__item--eu{justify-content:flex-end; padding-left:14%}
.zap__item--v0n{padding-right:10%}
.zap__item--v0n + .zap__item--v0n{margin-left:5%}
.zap__av{flex:none; width:32px; height:32px; border-radius:50%}
.zap__msg{padding:12px 16px; border-radius:20px}
.zap__msg--eu{background:var(--osso); color:var(--carbono); border-bottom-right-radius:6px}
.zap__msg--v0n{background:var(--grafite); color:var(--osso); border:1px solid var(--borda-forte); border-bottom-left-radius:6px}
.zap__check{margin-left:8px; font-size:11px; letter-spacing:-.15em; color:rgb(0 0 0 / .4); white-space:nowrap}/* "Digitando": três pontos num balão pequeno, no lugar onde a resposta vai nascer. */
.zap__dots{
  position:absolute; left:42px; bottom:0; display:flex; gap:5px; padding:15px 16px;
  border:1px solid var(--borda-forte); border-radius:20px; border-bottom-left-radius:6px; background:var(--grafite);
  opacity:0; visibility:hidden;
}
.zap__dots i{width:7px; height:7px; border-radius:50%; background:var(--aco); animation:zap-pula 1.2s ease-in-out infinite}
.zap__dots i:nth-child(2){animation-delay:.15s}
.zap__dots i:nth-child(3){animation-delay:.3s}
@keyframes zap-pula{0%, 60%, 100%{translate:0 0; opacity:.5} 30%{translate:0 -4px; opacity:1}}

/* ===== Como eu trabalho ===== */
.passos{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  margin:48px 0 0;
  padding:0;
  list-style:none;
}
.passo{
  padding-top:24px;
  border-top:1px solid var(--linha);
}
.passo__ficha{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0 0 16px;
}
.passo__num{
  font:500 40px/1 'IBM Plex Mono', ui-monospace, monospace;
  color:var(--ouro);
  text-shadow:0 0 24px rgb(255 197 49 / .45);
  margin:0;
}
.passo .t3{margin:0 0 10px}
.passo p{margin:0}

@media (max-width:719px){
  .passos{grid-template-columns:1fr; gap:32px}
}

/* ===== Cards (grade de trabalhos comentada + servicos) ===== */
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin:48px 0 0;
}
/* Uma camada só. O truque de duas camadas existia porque `border` comum
   desaparece na diagonal de um clip-path — com raio, `border` funciona. */
.card{
  background:var(--sup);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  padding:clamp(24px, 4vw, 32px);
  transition:border-color var(--rapido) var(--saida), background var(--rapido) var(--saida);
}
.card:hover{border-color:var(--borda-forte); background:rgb(236 237 232 / .05)}
.card .rotulo{margin:0 0 12px}
.card .t3{margin:0 0 12px}
.card p{margin:0}

@media (max-width:719px){
  .cards{grid-template-columns:1fr}
}

/* ===== Fecho ===== */
.fecho{max-width:640px; margin-inline:auto; text-align:center}
.fecho__texto{margin:0 0 32px}

/* ===== Rodape ===== */
.rodape{border-top:1px solid var(--linha); padding-block:32px}
.rodape__conteudo{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 24px;
}
/* O fill do logo-mono.svg ja e aco: CSS de fora nao entra em <img>. */
.rodape__logo{display:block}
.rodape__assinatura,
.rodape__ano{
  margin:0;
  font:500 13px/1 'IBM Plex Mono', ui-monospace, monospace;
  color:var(--aco);
}

/* ===== 05 / Perguntas =====
   <details> nativo: teclado, leitor de tela e funcionamento sem CSS de
   graça. A seta é ::after; o triângulo padrão do navegador sai. */
.faq{margin-top:40px; display:grid; gap:0; border-top:1px solid var(--linha)}
.faq__item{border-bottom:1px solid var(--linha)}
.faq__pergunta{
  cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-weight:500; color:var(--osso);
  transition:color var(--rapido) var(--saida);
}
.faq__pergunta::-webkit-details-marker{display:none}
.faq__pergunta:hover{color:var(--ouro)}
.faq__pergunta::after{
  content:''; position:absolute; right:8px; top:50%; width:9px; height:9px;
  border-right:1.5px solid var(--aco); border-bottom:1.5px solid var(--aco);
  transform:translateY(-70%) rotate(45deg);
  transition:transform var(--rapido) var(--saida), border-color var(--rapido) var(--saida);
}
.faq__item[open] .faq__pergunta::after{transform:translateY(-30%) rotate(-135deg); border-color:var(--ouro)}
.faq__resposta{margin:0 0 26px; max-width:62ch; color:var(--aco)}

/* ===== Página de case =====
   O global de imagem entra junto com o primeiro print de verdade: sem ele,
   print maior que o envelope estoura a largura e cria rolagem horizontal.
   Ficou anotado como pendência desde a v1, e o molde é quem cobra. */
img{max-width:100%}
.case__print{
  display:block; width:100%; height:auto;
  border:1px solid var(--borda); border-radius:var(--raio);
  margin:0 0 20px;
}

/* ===== Abertura =====
   Esquema medido no styles.css do mazyos.com.br. A batida e a unidade de
   tudo: cada palavra dura uma batida e todos os atrasos sao multiplos
   dela. Mudar --batida encolhe ou estica a abertura inteira, sem tocar
   em mais nada. Aqui ela e .9s: o Kaua pediu 1.25s, depois pediu a
   abertura mais curta. Com o voo da logo ela cabe em uns 5s.

   Cor tambem medida la, a pedido do Kaua: branco de verdade, nao o osso da
   marca. O ouro fica so no quadrado do logo, no fim. */
.intro{
  --batida:.9s;
  position:fixed; inset:0; z-index:9999;
  background:var(--carbono);
  display:flex; align-items:center; justify-content:center;
  transition:background-color calc(var(--batida) * .9) ease;
}

/* O brilho da abertura do MazyOS nao vem de halo na letra: vem de um poco de
   luz atras dela, branco a 7% numa elipse alta. E ele que faz o fundo parecer
   iluminado em vez de preto chapado. Valores copiados do .intro-overlay::before
   de la. */
.intro::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 50% 35%, rgb(255 255 255 / .07) 0%, transparent 70%);
  transition:opacity calc(var(--batida) * .9) ease;
}
html.intro-rodando{overflow:hidden}

.intro__palco{
  position:relative;
  /* height = line-height: com 1.4em a frase (presa no topo) ficava .1em
     acima do centro da tela, onde a logo monta. */
  width:min(92%, 1100px); height:1.2em;
  font:500 clamp(2.4rem, 6.5vw, 5.5rem)/1.2 'Inter', system-ui, sans-serif;
  /* Caixa alta pede espaco positivo: o -.025em da referencia e de frase em
     caixa baixa e gruda as letras de MAIS PRESENÇA.. */
  letter-spacing:.02em; text-align:center;
  /* Branco a 94%, o mesmo da referencia. O osso (#ECEDE8) e quente e num
     fundo carbono lê bege ao lado do branco puro da palavra em destaque. */
  color:rgb(255 255 255 / .94);
}

/* "MAIS" fica parado; so a palavra da direita gira. A coluna da direita
   tem a largura da palavra mais longa (PRESENÇA.), entao o bloco inteiro
   nao se mexe quando a palavra troca - se mexesse, MAIS pularia. */
.intro__frase{
  position:absolute; top:0; left:50%; white-space:nowrap;
  display:inline-grid; grid-template-columns:auto auto;
  align-items:baseline; column-gap:.24em;
  opacity:0; transform:translate(-50%, 22%);
  animation:intro-bloco calc(var(--batida) * 3) cubic-bezier(.33, 0, .2, 1) calc(var(--batida) * .08) forwards;
  will-change:opacity, transform;
}

/* O halo e o mesmo nos dois, a pedido do Kaua: um unico de 30px a 55%, o
   valor que o MazyOS usa no <em> dele. Fica aqui na frase e nao em cada
   span porque text-shadow e herdado - uma declaracao, os dois brilham
   igual por construcao, sem chance de sairem de sincronia. */
.intro__frase{text-shadow:0 0 30px rgb(255 255 255 / .55)}
.intro__fixo{white-space:nowrap; font-weight:300}
.intro__palavras{display:grid; grid-template-columns:1fr; grid-template-rows:1fr; justify-items:start; align-items:baseline}
.intro__palavra{
  grid-column:1; grid-row:1;
  font-weight:700; color:#fff;
  opacity:0; transform:translateY(22%);
  animation:intro-palavra var(--batida) cubic-bezier(.33, 0, .2, 1) forwards;
  will-change:opacity, transform;
}
.intro__palavra:nth-child(1){animation-delay:calc(var(--batida) * .08)}
.intro__palavra:nth-child(2){animation-delay:calc(var(--batida) * 1.08)}
.intro__palavra:nth-child(3){animation-delay:calc(var(--batida) * 2.08)}

/* A logo monta peca por peca quando a frase sai: o 0 primeiro, V e N
   fechando em volta dele, o quadrado de ouro por ultimo. E ela que revela
   a hero. overflow visivel porque V e N comecam fora do viewBox - dentro,
   a borda do SVG cortaria os dois na entrada. */
.intro__logo{
  position:absolute; top:50%; left:50%;
  /* 420 e nao 320: a 1440px a frase tem uns 600px e a logo de 320 ficava um
     degrau abaixo dela. No celular quem manda continua sendo o 62vw. */
  width:min(420px, 62vw); height:auto;
  transform:translate(-50%, -50%);
  overflow:visible; fill:var(--osso);
}

/* Saida: o fundo apaga e a logo voa ate a do cabecalho. O site.js mede os
   dois lugares e escreve o transform; aqui fica so o tempo e a curva.
   Curva de ida e volta (lenta-rapida-lenta): e deslocamento, nao entrada. */
.intro--saindo{background-color:transparent; pointer-events:none}
.intro--saindo::before{opacity:0}
.intro--saindo .intro__logo{transition:transform calc(var(--batida) * .9) cubic-bezier(.65, 0, .35, 1)}
/* A logo do cabecalho espera escondida: quem chega nela e a da abertura. */
html.intro-rodando .topo__logo{visibility:hidden}
.intro__peca{
  opacity:0;
  /* fill-box: a origem passa a ser o centro da propria peca, senao o
     scale do 0 e do quadrado gira em torno do canto do viewBox. */
  transform-box:fill-box; transform-origin:center;
  animation-duration:calc(var(--batida) * .6);
  animation-timing-function:cubic-bezier(.22, 1, .36, 1);
  animation-fill-mode:both;
  will-change:opacity, transform;
}
.intro__peca--o{animation-name:intro-o; animation-delay:calc(var(--batida) * 3.15)}
.intro__peca--v{animation-name:intro-v; animation-delay:calc(var(--batida) * 3.45)}
.intro__peca--n{animation-name:intro-n; animation-delay:calc(var(--batida) * 3.6)}
.intro__peca--ponto{
  fill:var(--ouro);
  animation-name:intro-o; animation-delay:calc(var(--batida) * 3.85);
  animation-duration:calc(var(--batida) * .45);
}

/* Curso curto (22% da altura da letra, era 40%) e janela larga: a palavra
   desliza durante 28% da batida em vez de 20%, entao anda menos e demora
   mais - que e o que faz um movimento ser lido como suave. */
@keyframes intro-palavra{
  0%{opacity:0; transform:translateY(22%)}
  28%{opacity:1; transform:translateY(0)}
  72%{opacity:1; transform:translateY(0)}
  100%{opacity:0; transform:translateY(-22%)}
}
@keyframes intro-bloco{
  0%{opacity:0; transform:translate(-50%, 22%)}
  10%{opacity:1; transform:translate(-50%, 0)}
  90%{opacity:1; transform:translate(-50%, 0)}
  100%{opacity:0; transform:translate(-50%, -22%)}
}
@keyframes intro-o{
  from{opacity:0; transform:scale(.7)}
  to{opacity:1; transform:none}
}
@keyframes intro-v{
  from{opacity:0; transform:translateX(-32%)}
  to{opacity:1; transform:none}
}
@keyframes intro-n{
  from{opacity:0; transform:translateX(32%)}
  to{opacity:1; transform:none}
}

/* A abertura nunca pode ser obstaculo. Sem JS ela nao existe, senao um
   overlay fixo cobriria o site pra sempre. */
html:not(.js) .intro{display:none}
@media (prefers-reduced-motion: reduce){
  .intro{display:none}
}

/* A frase e nowrap (esquema do MazyOS), entao em tela pequena quem cede e
   o corpo da fonte - os mesmos dois degraus que a referencia usa. */
@media (max-width:719px){
  .intro__palco{font-size:clamp(1.8rem, 9vw, 2.8rem); width:94%}
}
@media (max-width:420px){
  .intro__palco{font-size:1.6rem}
}