/* ============================================================
   HEADER fixo — logo à esquerda, CTA à direita
   ============================================================ */
/* O fio de 1px virou FILETE DUPLO: um traço de tinta cheia com um segundo
   mais claro logo abaixo é a régua de tipografia impressa, e é ela que
   separa este cabeçalho de um hairline de interface. Vai por `box-shadow`
   e não por `border-bottom` porque são duas linhas com um vão entre elas,
   coisa que uma borda só não faz. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(242,239,230,.9);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 1.5px 0 var(--ink), 0 4px 0 var(--linha);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:none}
/* ---------- a logo entrou na condensada ----------
   Ela usava a Archivo de largura natural, a única largura que mais nada
   na página usa. Agora é a condensada 62%, a mesma do lockup do hero e a
   mesma das outras três páginas do estúdio. Como 62% ocupa menos, o corpo
   pôde subir: mais presença no MESMO espaço, sem custar layout.

   E "ESTÚDIO" saiu do cinza claro para o esmeralda em mono: é a faixa dos
   30% da paleta, e é o único ponto de cor de marca acima da dobra que não
   é o grifo da manchete. */
.logo{
  font-family:var(--font-display);font-stretch:62%;font-weight:900;text-transform:uppercase;
  line-height:.86;font-size:clamp(16px,4.6vw,22px);letter-spacing:.004em;white-space:nowrap;
}
.logo .suffix{
  font-family:var(--font-mono);font-weight:400;font-size:8.5px;
  letter-spacing:.42em;color:var(--green-dark);
}
@media(min-width:461px){.logo .suffix{margin-left:8px;position:relative;top:-2px}}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--font-mono);font-weight:700;font-size:clamp(11px,3.2vw,13px);
  letter-spacing:.05em;text-transform:uppercase;transition:background .2s;
}
/* Mobile: sufixo "ESTÚDIO" desce para a linha de baixo, espaçado
   para acompanhar a largura do nome (lockup em duas linhas) */
@media(max-width:460px){
  .logo b{display:block}
  .logo .suffix{display:block;font-size:8px;letter-spacing:.36em;margin-top:3px}
}
/* O CTA do topo é GRAFITE CHEIO, e não rosa: ele só rola até o formulário
   lá embaixo, e o rosa está reservado para o que a página quer que
   aconteça de fato. É a mesma divisão da /vitrine-digital. */
.nav-cta{background:var(--ink);color:#fff;padding:11px 16px}
@media(hover:hover) and (pointer:fine){ .nav-cta:hover{background:#000} }
.nav-cta .arrow{color:var(--green-live)}
.header-actions{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px)}
.nav-product{
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  color:var(--ink-soft);border-bottom:1px solid var(--linha);padding-bottom:3px;
  transition:color .2s,border-color .2s;
}
@media(hover:hover) and (pointer:fine){
  .nav-product:hover{color:var(--ink);border-bottom-color:var(--ink)}
}
@media(max-width:820px){.nav-product{display:none}}

/* ---------- na /landing-page o botão do topo some no celular (11/09) ----------
   Ali o formulário está a uma tela de distância e o pill flutuante cobre
   o resto da página. Um botão que rola até o próprio pé só rouba a
   primeira tela da manchete. A classe `lp` vem do js/main-lp.js. */
@media(max-width:820px){.lp .nav-cta{display:none}}
/* ---------- e os links de navegação somem em qualquer largura ----------
   Página de tráfego pago tem uma saída só, o formulário. "Serviços",
   "Vitrine digital" e "Portfólio" são três portas para fora, cada uma com
   uma oferta diferente da que o anúncio prometeu. Fica a logo (âncora
   para o topo) e, no desktop, o botão da própria ação. */
.lp .nav-product{display:none}

/* ---------- seletor de idioma PT | EN (11/09/2026) ----------
   O mesmo pill do components/idioma/SeletorIdioma da vitrine, em CSS
   plano: filete de tinta, mono miúda, a escolha ativa em tinta cheia.
   Só aparece nas páginas que têm irmã em inglês (header.js decide). */
.lang{display:inline-flex;align-items:stretch;height:28px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);white-space:nowrap;flex:none}
.lang a{display:inline-flex;align-items:center;gap:5px;padding:0 8px;text-decoration:none;font-family:var(--font-mono);font-weight:700;font-size:9.5px;letter-spacing:.12em;color:inherit;transition:background .15s,color .15s}
.lang a+a{border-left:1px solid var(--ink)}
.lang svg{display:block;flex:none;outline:1px solid rgba(20,24,26,.18);outline-offset:-1px}
.lang a[aria-current]{background:var(--ink);color:#fff}
@media(hover:hover) and (pointer:fine){.lang a:not([aria-current]):hover{background:rgba(20,24,26,.08)}}
.lang a:focus-visible{outline:2px solid var(--rosa);outline-offset:2px}