/* ==========================================================
   Studio Baze V3 — fundação visual
   ==========================================================
   Carrega depois de baze-system.css. Estabelece o raio, o
   respiro e o papel quente da direção nova. Os valores vêm
   do protótipo aprovado, não de escolha nova.
   ========================================================== */

:root{
  --raio:22px;          /* cartões e seções */
  --raio-medio:16px;    /* elementos menores */
  --raio-pilula:999px;  /* botões */
  --pad:clamp(22px,4vw,64px);

  /* O papel esfria menos que o cinza anterior (#f7f7fa) */
  --paper:#f4f2ed;
  --ink:#0a0a0a;
}

body{background:var(--paper)}

/* ---------- Botões viram pílula ---------- */
.btn{
  border-radius:var(--raio-pilula);
  padding-inline:26px;
}
.menu-button{border-radius:var(--raio-pilula)}

/* ---------- Campos do formulário ---------- */
.field select{border-radius:0}
.form-submit{border-radius:var(--raio-pilula)}

/* ---------- Blocos que passam a ser cartão ---------- */
.market-card,
.metric,
.diagnostic-point,
.article-card,
.focus-band,
.final-cta,
.services,
.analysis-form,
.faq-item,
.answer-block,
.entity-card > div,
.service-detail,
.jump-nav a,
.cookie-consent{border-radius:var(--raio)}

/* Seções escuras deixam de encostar nas bordas da tela */
.focus-band,
.final-cta,
.services{
  margin-inline:clamp(12px,2vw,28px);
  overflow:hidden;
}

/* ---------- Imagens ---------- */
.project-image,
.article-image,
.hero-visual img,
.client-strip img{border-radius:var(--raio-medio)}

/* ---------- Rodapé arredondado, como no protótipo ---------- */
.site-footer{
  border-radius:var(--raio) var(--raio) 0 0;
  margin-inline:clamp(12px,2vw,28px);
}

/* ---------- Respiro ---------- */
.container{padding-inline:var(--pad)}

@media(max-width:860px){
  :root{--raio:18px;--raio-medio:14px}
  .focus-band,.final-cta,.services,.site-footer{margin-inline:10px}
}

/* ==========================================================
   Home: abertura centralizada
   ==========================================================
   A manchete deixa de dividir a linha com o visual e passa a
   abrir a página no eixo central, como no layout aprovado. A
   arte vai para baixo, em largura contida.
   ========================================================== */
.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-top:clamp(120px,14vh,180px);
}
.hero h1{
  max-width:16ch;
  margin-inline:auto;
  font-size:clamp(38px,6.4vw,84px);
  line-height:1.02;
  letter-spacing:-.04em;
}
.hero-lead{
  max-width:56ch;
  margin-inline:auto;
  text-align:center;
}
.hero-actions{
  justify-content:center;
  margin-top:34px;
}

/* ---------- Faixa de clientes em movimento ---------- */
.hero .client-strip{
  width:100%;
  margin-top:clamp(36px,5vw,64px);
  /* A faixa some nas pontas em vez de cortar seco */
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.client-track{animation:desliza 34s linear infinite}
@keyframes desliza{to{transform:translateX(-50%)}}
.client-strip:hover .client-track{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
  .client-track{animation:none}
  .hero .client-strip{-webkit-mask:none;mask:none}
}

@media(max-width:860px){
  .hero-inner{padding-top:104px;display:flex;grid-template-columns:none}
  .hero h1{font-size:clamp(30px,8.6vw,46px);max-width:14ch}
  .hero-actions{width:100%;max-width:360px}
}

/* O wrapper do texto some da montagem para que manchete, apoio,
   botões, arte e faixa de clientes virem irmãos e possam ser
   ordenados um a um. As logos fecham o bloco, que é onde elas
   funcionam como prova. */
@media(min-width:861px){
  .hero-copy-wrap{display:contents}
  .hero h1{order:1}
  .hero-lead{order:2}
  .hero-actions{order:3}
  .hero .client-strip{order:5;width:100%}
}

/* ==========================================================
   Portfólio na home
   ==========================================================
   Cada cartão mostra o site do cliente com a marca dele
   centralizada por cima. No hover a captura perde o foco e a
   marca cresce: a atenção vai para quem é o cliente, não para
   o detalhe da interface.
   ========================================================== */
.casos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(18px,2.4vw,32px);
  margin-top:clamp(40px,5vw,64px);
}
.caso{min-width:0}

.caso-tela{
  position:relative;
  overflow:hidden;
  border-radius:var(--raio);
  background:var(--ink);
  aspect-ratio:16/10;
}
.caso-imagem{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:filter .45s var(--ease,ease),transform .45s var(--ease,ease);
}

/* O desfoque só entra onde há cursor de verdade */
@media(hover:hover){
  .caso:hover .caso-imagem{filter:blur(6px) saturate(.9);transform:scale(1.04)}
}

.caso-pe{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px;
  padding:18px 4px 0;
}
.caso-pe h3{
  margin:0;
  font-size:clamp(17px,1.6vw,21px);
  font-weight:500;
  letter-spacing:-.015em;
}
.caso-pe p{
  margin:0;
  color:var(--muted-light);
  font-size:var(--fs-small);
}
.caso-frente{
  margin-left:auto;
  color:var(--faint-dark);
  font-size:var(--fs-meta);
}

@media(prefers-reduced-motion:reduce){
  .caso-imagem,.caso-logo{transition:none}
  .caso:hover .caso-imagem{filter:none;transform:none}
}

/* ==========================================================
   Frentes de trabalho: coluna fixa e pilha de cartões
   ==========================================================
   A coluna da esquerda acompanha a rolagem. Os cartões ficam
   empilhados com um leve deslocamento, para o olho perceber
   que há algo atrás sem que o de trás dispute leitura. Clicar
   num nome da lista traz o cartão correspondente para a frente.
   ========================================================== */
.frentes-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,80px);
  align-items:start;
  padding-block:clamp(64px,8vw,110px);
}

.frentes-intro{
  position:sticky;
  top:calc(var(--h-header,82px) + 28px);
}
.frentes-intro h2{
  margin:0 0 20px;
  font-size:clamp(30px,3.4vw,50px);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.035em;
}

.frentes-lista{
  display:flex;
  flex-direction:column;
  margin:30px 0 28px;
  border-top:1px solid var(--hair-dark);
}
.frente-item{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:14px 2px;
  border:0;
  border-bottom:1px solid var(--hair-dark);
  background:none;
  color:inherit;
  cursor:pointer;
  font:inherit;
  text-align:left;
  transition:opacity .2s var(--ease,ease),padding-left .25s var(--ease,ease);
}
.frente-nome{font-size:var(--fs-body);font-weight:500;letter-spacing:-.01em}
.frente-camada{color:var(--faint-dark);font-size:var(--fs-meta)}
.frente-item:hover{opacity:.62;padding-left:8px}
.frente-item[aria-current="true"]{padding-left:10px}
.frente-item[aria-current="true"] .frente-nome{font-weight:600}
.frente-item[aria-current="true"]::before{
  content:"";
  position:absolute;
  width:3px;height:1.1em;
  margin-left:-10px;
  background:currentColor;
}
.frente-item{position:relative}

/* ---------- A pilha ---------- */
.frentes-pilha{
  position:relative;
  min-height:clamp(380px,46vw,520px);
}
.frente-card{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,42%) minmax(0,1fr);
  overflow:hidden;
  border-radius:var(--raio);
  background:var(--ink);
  color:#fff;
  /* O cartão de trás recua e desce: sugere profundidade sem competir */
  transform:translateY(calc(var(--nivel,0) * 14px)) scale(calc(1 - var(--nivel,0) * .035));
  opacity:calc(1 - var(--nivel,0) * .35);
  z-index:calc(20 - var(--nivel,0));
  transition:transform .5s var(--ease,cubic-bezier(.2,.8,.2,1)),opacity .5s var(--ease,ease);
  pointer-events:none;
}
.frente-card[data-ativo="true"]{pointer-events:auto}
/* Mais de dois níveis atrás não acrescenta informação, só ruído */
.frente-card[data-oculto="true"]{opacity:0;pointer-events:none}

.frente-img{position:relative;overflow:hidden;background:#111}
.frente-img img{width:100%;height:100%;object-fit:cover;display:block}

.frente-corpo{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  padding:clamp(24px,3vw,44px);
}
.frente-corpo h3{
  margin:0;
  font-size:clamp(24px,2.6vw,38px);
  font-weight:400;
  letter-spacing:-.03em;
  line-height:1.06;
}
.frente-corpo p{
  margin:0;
  max-width:44ch;
  color:var(--muted-dark);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
}
.frente-corpo .text-link{color:#fff;align-self:flex-start}
.frente-corpo abbr[title]{color:inherit}

@media(max-width:980px){
  .frentes-grid{grid-template-columns:1fr;gap:34px}
  .frentes-intro{position:static}
  .frentes-pilha{min-height:clamp(420px,88vw,560px)}
  .frente-card{grid-template-columns:1fr;grid-template-rows:minmax(0,38%) minmax(0,1fr)}
}

/* ---------- Frentes no celular: ordem de leitura ----------
   Abaixo de 641px (fora da faixa do carrossel de tablet) a ordem no
   HTML — título, lista de nomes, setas, botão, só depois o cartão —
   fazia a pessoa rolar por um índice inteiro antes de ver do que se
   trata. Vira: título e subtítulo, o cartão (a prova), a seta que o
   move e só então a lista de serviços clicáveis. display:contents
   tira a caixa do agrupador sem mudar o HTML nem quebrar os
   seletores que dependem de .frentes-intro como ancestral. */
@media(max-width:640px){
  .frentes-intro{display:contents}
  .frentes-intro h2,
  .frentes-intro p{order:1}
  .frentes-pilha{order:2}
  .frentes-navegacao{order:3}
  .frentes-lista{order:4}
  .frentes-intro .btn-white{order:5}
}

@media(prefers-reduced-motion:reduce){
  .frente-card,.frente-item{transition:none}
}

/* A seção deixa de ser um bloco preto inteiro: o preto passa a ser
   dos cartões. A coluna da esquerda volta para o papel, que é o que
   dá a leitura de "índice ao lado, conteúdo na frente". */
.services{
  color:var(--ink);
  background:transparent;
  margin-inline:0;
  border-radius:0;
  overflow:visible;
}
.services .frentes-intro h2,
.services .frentes-intro p{color:inherit}
.services .frentes-intro p{color:var(--muted-light)}
.frentes-lista{border-color:var(--line,#dcdce1)}
.frente-item{border-bottom-color:var(--line,#dcdce1)}
.frentes-intro .btn-white{
  color:#fff;
  background:var(--ink);
  border-color:var(--ink);
}

/* ---------- O rosto que acompanha o cursor ----------
   Mesmo vocabulário do resto: retângulo de cantos arredondados, preto
   e branco, sem degradê. O tamanho é contido de propósito: ele abre a
   coluna do diagnóstico, não disputa com o título. */
.robo-olhar{
  width:clamp(120px,14vw,168px);
  margin:0 0 26px;
}
.robo-olhar svg{display:block;width:100%;height:auto;overflow:visible}
.robo-cabeca{fill:var(--ink)}
.robo-antena{fill:var(--ink)}
.robo-olho{fill:#fff}
.robo-pupila{fill:var(--ink);transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.robo-boca{fill:#fff}

@media(prefers-reduced-motion:reduce){
  .robo-pupila{transition:none}
}
@media(max-width:860px){
  .robo-olhar{width:104px;margin-bottom:20px}
}

/* A coluna de contato guarda o e-mail inteiro. Com três colunas iguais
   ele quebrava no meio da palavra ("comercial@studiobaz / e.com.br"),
   que é endereço nenhum. max-content dá a ela a largura da linha mais
   longa e as outras duas cedem o espaço. */
@media(min-width:861px){
  .site-footer .footer-links{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(max-content,1fr);
  }
}

/* ==========================================================
   Ajustes V4
   ========================================================== */

/* ---------- Botão cheio não recebe mais a linha que corre ----------
   O traço de 1px que varria a base do botão era desenho de botão
   retangular. Em pílula ele corta a curva e parece carregamento
   travado. Fica só no text-link, onde a linha é o próprio desenho. */
.btn::before,
.btn::after{content:none}

/* ---------- Header: navegação encostada no CTA ---------- */
@media(min-width:861px){
  .header-inner{gap:44px}
  .desktop-nav{justify-content:flex-end;gap:30px}
}

/* ---------- Hero sem arte, logos menores logo abaixo dos CTAs ---------- */
.hero .hero-actions{margin-bottom:34px}
.hero .client-strip{
  width:100%;
  max-width:560px;
  margin-inline:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.hero .client-strip img{
  height:30px;
  width:auto;
  opacity:.5;
}
.hero-inner{padding-bottom:clamp(64px,9vh,110px)}

@media(max-width:860px){
  .hero .client-strip{max-width:none}
  .hero .client-strip img{height:24px}
}

/* ---------- Serviços: setas para passar sem clicar na lista ---------- */
.frentes-navegacao{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:18px;
}
.frente-seta{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid var(--ink);
  border-radius:var(--raio-pilula);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:color .2s,background .2s;
}
.frente-seta:hover{color:#fff;background:var(--ink)}
.frente-seta .icon{font-size:18px}
.frente-contador{
  margin-left:6px;
  color:#7b7b82;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}

/* ---------- Portfólio em mosaico ---------- */
.casos{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}
/* Alterna 7/5 e 5/7: um cartão maior ao lado de um menor, e a linha
   seguinte inverte, para o olho não achar que é uma grade regular. */
.caso{grid-column:span 6}
.caso:nth-child(4n+1){grid-column:span 7}
.caso:nth-child(4n+2){grid-column:span 5}
.caso:nth-child(4n+3){grid-column:span 5}
.caso:nth-child(4n+4){grid-column:span 7}

.caso-tela{position:relative;overflow:hidden}
.caso:nth-child(4n+1) .caso-tela,
.caso:nth-child(4n+4) .caso-tela{aspect-ratio:16/10}
.caso:nth-child(4n+2) .caso-tela,
.caso:nth-child(4n+3) .caso-tela{aspect-ratio:4/3}
.caso-tela img.caso-imagem{width:100%;height:100%;object-fit:cover}

/* Círculo preto com a seta na diagonal, que é o convite de clique */
.caso-abrir{
  position:absolute;
  top:50%;
  left:50%;
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  opacity:0;
  transform:translate(-50%,-50%) scale(.82);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
  pointer-events:none;
}
.caso-abrir .icon{font-size:24px}
.caso:hover .caso-abrir,
.caso:focus-within .caso-abrir{opacity:1;transform:translate(-50%,-50%) scale(1)}

@media(max-width:860px){
  .casos{grid-template-columns:1fr}
  .caso,
  .caso:nth-child(4n+1),
  .caso:nth-child(4n+2),
  .caso:nth-child(4n+3),
  .caso:nth-child(4n+4){grid-column:auto}
  .caso .caso-tela{aspect-ratio:16/10}
  .caso-abrir{width:58px;height:58px}
}

/* ---------- Planos ---------- */
.planos{padding-block:clamp(56px,8vw,104px)}
.planos .section-head{margin-bottom:clamp(30px,4vw,54px);text-align:center}
.planos .section-head h2{margin:0}
.planos-grade{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px);
  align-items:start;
}
.plano{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:clamp(26px,2.4vw,38px);
  border-radius:var(--raio);
  background:#f1efea;
}
.plano-destaque{
  background:var(--ink);
  color:#fff;
}
.plano-topo{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
}
.plano-topo h3{
  margin:0;
  font-size:clamp(24px,2vw,30px);
  font-weight:400;
  letter-spacing:-.03em;
}
.plano-selo{
  padding:7px 15px;
  border-radius:var(--raio-pilula);
  background:#fff;
  color:var(--ink);
  font-size:12px;
  white-space:nowrap;
}
.plano-prazo{
  margin:20px 0 0;
  padding:9px 18px;
  border-radius:var(--raio-pilula);
  background:#e4e1da;
  color:#4c4c53;
  font-size:12px;
  text-align:center;
}
.plano-destaque .plano-prazo{background:#26262b;color:#c9c9d0}
.plano-linha{
  margin:24px 0 0;
  font-size:17px;
  font-weight:500;
  line-height:1.35;
}
.plano-itens{
  margin:26px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:15px;
}
.plano-itens li{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:10px;
  align-items:start;
  font-size:13px;
  line-height:1.45;
}
.plano-itens .icon{margin-top:1px;font-size:13px;opacity:.55}
.plano .btn{margin-top:auto;padding-top:0}
.plano-itens + .btn{margin-top:32px}
.plano .btn{width:100%;justify-content:center;margin-top:34px}

@media(max-width:1020px){
  .planos-grade{grid-template-columns:1fr}
  .plano{min-height:0}
}

/* ══ Tilt ═══════════════════════════════════════════════════
   Componente Tilt do Bencho (bencho.dev, licença MIT), portado
   de React para JS puro porque este site é HTML estático e não
   tem build. Um cartão que cede sob o ponteiro.

   Quase nada mora aqui: a rotação, os dois gradientes e a
   sombra são escritos quadro a quadro a partir da posição do
   ponteiro, e uma regra neste arquivo que também opinasse
   sobre qualquer um deles seria um segundo autor. O que sobra
   são as coisas que valem qualquer que seja o ponteiro.

   --surface-2 é token do Bencho. Aqui o trabalho equivalente
   é feito por --ink, que já é o fundo do cartão de frente,
   então o mapeamento fica na própria raiz do componente para
   não vazar um global novo. */

/* ── a profundidade da sala ─────────────────────────────────
   O único número que decide se isto lê como cartão girando ou
   como pôster sendo cisalhado. Perspectiva é a distância do
   observador até a tela, então número pequeno é rosto colado
   no vidro: o canto perto cresce, o canto longe encolhe, e dez
   graus parecem trinta.

   800 contra um cartão de ~500px é cerca de uma altura e meia
   de recuo: longe o bastante para o escorço ser sugestão e não
   olho de peixe, perto o bastante para os cantos ficarem
   visivelmente de tamanhos diferentes. Não é botão porque não
   é ideia separada da inclinação: as duas respondem "quão 3D",
   e dois controles para uma sensação é como um painel deixa de
   significar algo.

   A perspectiva vive na pilha, não no cartão: no próprio
   elemento ela é aplicada por elemento e o ponto de fuga viaja
   junto com a rotação em vez de ficar parado na sala. */
.frentes-pilha{perspective:800px}

.frente-card{
  /* O trabalho do --surface-2 do Bencho já é feito pelo --ink
     daqui. Fica local, na raiz do componente. */
  --surface-2:var(--ink);
  background:var(--surface-2);
}

/* ── ELE AFUNDA, NÃO LEVANTA ────────────────────────────────
   Todo tilt card da internet gira NA DIREÇÃO do cursor: o
   canto de que você está mais perto sobe para te encontrar e o
   cartão lê como uma placa de vidro pegando luz. Este faz o
   contrário: o ponto sobre o qual você está VAI EMBORA e o
   lado oposto sobe. A diferença é um sinal de menos e é o
   componente inteiro: uma superfície que sobe até o seu dedo
   está sendo exibida para você, e uma superfície que cede sob
   ele está sendo tocada.

   O que significa que o sinal não é detalhe para acertar no
   tato. Cursor no topo → a borda de cima tem que ir para trás,
   o que é um rotateX POSITIVO; cursor à direita → a borda
   direita vai para trás, o que é um rotateY positivo. Daí
   `rx = -ny` e `ry = +nx`, a negação do par usual. O JS escreve
   --tlt-rx e --tlt-ry já com esse sinal.

   O translateZ vem PRIMEIRO, para o recuo ser medido nos eixos
   da sala e não nos do próprio cartão: depois de uma rotação o
   z do cartão aponta para algum lugar de lado e "para trás"
   deixa de significar para trás.

   O recuo é pequeno de propósito: é a diferença entre um
   cartão que tomba e um cartão que é pressionado, e passando
   de uns vinte deixa de ser pressão e vira zoom. */
.frente-card{
  transform:
    translateZ(calc(var(--tlt-lit,0) * -14px))
    rotateX(var(--tlt-rx,0deg))
    rotateY(var(--tlt-ry,0deg))
    translateY(calc(var(--nivel,0) * 14px))
    scale(calc(1 - var(--nivel,0) * .035));
}

/* Enquanto a mola está correndo o cartão não pode ter
   transição própria: seriam dois autores disputando o mesmo
   transform, e o resultado é o atraso de meio segundo comendo
   cada quadro que a mola escreve. A opacidade continua com a
   dela, que ninguém mais toca. */
.frente-card[data-tilt="on"]{
  transition:opacity .5s var(--ease,ease);
}

/* ── a depressão e o bordo oposto ───────────────────────────
   A ROTAÇÃO SOZINHA NÃO BASTA. Rotação em torno do centro é
   simétrica, o lado perto desce e o lado longe sobe na mesma
   medida, e por si só lê como cartão pivotando, não como
   cartão sendo pressionado. O que faz virar pressão é o ponto
   mais escuro seguir o ponteiro: uma depressão junta sombra no
   fundo dela, e o bordo oposto pega luz. Esses dois gradientes
   fazem pelo menos tanto trabalho quanto o transform, e
   nenhum dos dois convenceria sozinho.

   Um elemento, dois gradientes, os dois posicionados pelo
   ponteiro: o escuro sob ele e o claro no espelho. Herda o
   raio em vez de receber um. */
.tlt-sheen{
  position:absolute;
  inset:0;
  z-index:5;
  border-radius:inherit;
  pointer-events:none;
}

/* Sem will-change. Ele seguraria uma camada composta para cada
   cartão da pilha, permanentemente, para poupar um quadro num
   hover que pode nunca vir. O navegador promove sozinho assim
   que o transform começa a andar. */

@media(prefers-reduced-motion:reduce){
  .tlt-sheen{display:none}
}

/* ==========================================================
   Ajustes V5 — espaçamento medido no estudo
   ========================================================== */

:root{
  /* 6vw no lugar de 4vw: a margem para de encolher quando a tela
     cresce. A proporção fica em 6,1% de 768 a 1440, em vez de cair
     para 4%. O piso sobe de 22 para 24px. */
  --pad:clamp(24px,6vw,120px);
  /* A faixa escura continua recuando menos que o texto, de propósito,
     mas agora por uma relação declarada e não por um clamp solto. */
  --pad-bloco:calc(var(--pad) / 2);
  /* Sem teto o conteúdo passava de 1700px em monitor grande. */
  --medida:1560px;
  --ritmo:clamp(64px,7.5vw,112px);
  --ritmo-abertura:clamp(96px,11vw,168px);
  --ritmo-encaixe:clamp(40px,4.5vw,64px);
}

.container{
  padding-inline:var(--pad);
  max-width:var(--medida);
  margin-inline:auto;
}

/* As faixas escuras sangram até perto da borda: o teto vale para o
   conteúdo dentro delas, não para a faixa. */
.final-cta,
.site-footer{margin-inline:var(--pad-bloco)}

@media(max-width:860px){
  .final-cta,.services,.site-footer{margin-inline:var(--pad-bloco)}
}

/* Um ritmo só no lugar dos nove valores que existiam */
.projects,
.diagnostic,
.planos,
.faq,
.journal{padding-block:var(--ritmo)}

/* ---------- Logos de clientes ----------
   Sem o véu de opacidade: a tira já vem nas cores das marcas, e
   meia opacidade só as apagava. 10% maior, como pedido. */
.hero .client-strip img{
  height:33px;
  opacity:1;
}

/* ---------- Setas das frentes ----------
   A folga entre as setas e o botão era zero: a borda de uma
   encostava na outra. */
.frentes-navegacao{margin-top:24px;margin-bottom:34px}
.frentes-intro .btn-white{margin-top:0}

/* ---------- Planos: quatro blocos ---------- */
.planos-grade{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Só o recomendado é preto. O gratuito abre a fila com a mesma
   cor dos outros, para ser uma porta e não uma exceção. */
.plano{background:#f1efea;color:var(--ink)}
.plano-destaque{background:var(--ink);color:#fff}

/* O título estava com text-align centrado dentro de uma caixa de
   680px encostada à esquerda: o texto centrava, a caixa não. */
.planos .section-head h2{margin-inline:auto}

@media(max-width:1180px){
  .planos-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .planos-grade{grid-template-columns:1fr}
}

/* ---------- Portfólio sem cabeçalho ----------
   O bloco de casos passa a abrir a seção, então precisa do respiro
   que o título dava. */
.projects .casos{margin-top:0}

/* ==========================================================
   Portfólio: página mãe e páginas de caso
   ========================================================== */

.page-open{padding-block:var(--ritmo-abertura) var(--ritmo-encaixe)}
.page-open h1{
  margin:14px 0 0;
  max-width:20ch;
  font-size:clamp(38px,5.4vw,72px);
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1.02;
  text-wrap:balance;
}
.page-lead{
  margin:22px 0 0;
  max-width:62ch;
  font-size:17px;
  line-height:1.6;
  color:#57575e;
}

.trilha{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:13px;
  color:#7b7b82;
}
.trilha a{color:#7b7b82;text-decoration:none;border-bottom:1px solid #d5d2cb}
.trilha a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* Os cartões da página mãe são links inteiros */
.projects .caso{display:block;color:inherit;text-decoration:none}
.caso-pe h2{
  margin:0;
  font-size:19px;
  font-weight:500;
  letter-spacing:-.02em;
}

/* ---------- Página de caso ---------- */
.caso-pagina{padding-block:calc(var(--ritmo-abertura) * .55) var(--ritmo)}

.caso-hero{
  position:relative;
  overflow:hidden;
  border-radius:var(--raio);
  background:#e4e1da;
}
.caso-hero-img{display:block;width:100%;height:auto}

/* A marca no centro, sobre a imagem. O véu escuro existe porque a
   captura por baixo é clara em alguns casos e escura em outros: sem
   ele a logo branca some na metade dos projetos. */
.caso-hero-marca{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(10,10,10,.34);
}
.caso-hero-logo{
  max-width:min(240px,34%);
  height:auto;
  filter:brightness(0) invert(1);
}
.caso-hero-texto{
  padding:12px 26px;
  border-radius:var(--raio-pilula);
  background:#fff;
  color:var(--ink);
  font-size:19px;
  filter:none;
}

.caso-passo{
  position:absolute;
  top:50%;
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 20px;
  transform:translateY(-50%);
  border-radius:var(--raio-pilula);
  background:rgba(255,255,255,.92);
  color:var(--ink);
  font-size:14px;
  text-decoration:none;
  transition:background .2s,color .2s;
}
.caso-passo:hover{background:var(--ink);color:#fff}
.caso-passo-ant{left:clamp(14px,2vw,28px)}
.caso-passo-pro{right:clamp(14px,2vw,28px)}

.caso-texto{padding-block:clamp(36px,4.5vw,64px) 0}
.caso-texto h1{
  margin:16px 0 0;
  font-size:clamp(34px,4.4vw,58px);
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1.04;
}
.caso-linha{
  margin:18px 0 0;
  max-width:58ch;
  font-size:19px;
  line-height:1.5;
}

.caso-ficha{
  margin:34px 0 0;
  display:flex;
  gap:clamp(28px,4vw,64px);
  flex-wrap:wrap;
  padding-top:24px;
  border-top:1px solid #d5d2cb;
}
.caso-ficha dt{
  margin:0 0 6px;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#7b7b82;
}
.caso-ficha dd{margin:0;font-size:16px}

.caso-acoes{
  margin:34px 0 0;
  display:flex;
  gap:clamp(20px,3vw,44px);
  flex-wrap:wrap;
  padding-top:26px;
  border-top:1px solid #d5d2cb;
}

@media(max-width:720px){
  .caso-passo span{display:none}
  .caso-passo{padding:12px 14px}
  .caso-hero-logo{max-width:46%}
}

/* ---------- CTA dos blocos de preço na mesma linha de base ----------
   Duas coisas impediam: a grade alinhava os cartões pelo topo, então
   cada um terminava na sua própria altura; e uma regra posterior
   trocava o margin-top:auto do botão por 34px fixos, que é o que
   empurrava o botão para logo abaixo da lista em vez do rodapé do
   cartão. Os blocos têm 4 e 5 itens, então sem isso nunca alinham. */
.planos-grade{align-items:stretch}
.plano{height:100%}
.plano-itens{margin-bottom:34px}
.plano > .btn{margin-top:auto}

/* ---------- Faixa de logos: o vazio era de medida ----------
   O .client-set estava travado em 718px porque foi dimensionado para a
   tira no tamanho natural. Ao reduzir a altura do logo a imagem passou
   a ocupar ~440px dentro de uma caixa de 718px, e os 280px restantes
   eram o buraco que aparecia. Agora a caixa acompanha o conteúdo e o
   respiro vem do gap, que é o que dá para regular sem quebrar o laço.
   Seis conjuntos, três por metade: com translateX(-50%) a emenda cai
   sempre sobre uma cópia igual, então a faixa nunca fica vazia. */
.hero .client-set{
  width:auto;
  flex:0 0 auto;
  padding-right:0;
}
.hero .client-track{gap:clamp(48px,6vw,88px)}
.hero .client-strip img{height:36px;opacity:1}

/* ==========================================================
   Padronização
   ==========================================================
   O levantamento achou três definições concorrentes dos mesmos
   quatro tokens, em três lugares: o :root embutido no index, o
   internal-pages.css e este arquivo. Resultado medido: preto em
   #050505, #090909 e #0a0a0a ao mesmo tempo; papel em #f8f8fb,
   #f7f7fa e #f4f2ed; filete em #dcdce1 e #d9d9de, conforme a
   página carregasse ou não o internal-pages.css. A home não
   carrega, então ela e as internas divergiam de verdade.

   Esta folha é a última a carregar em todas as páginas, então é
   aqui que a escolha final é feita. Uma definição por papel. */
:root{
  --ink:#0a0a0a;
  /* --black é o nome antigo do mesmo preto e ainda está em umas
     quarenta regras. Vira apelido em vez de um segundo valor: as
     regras existentes continuam válidas e param de divergir. */
  --black:var(--ink);
  --paper:#f4f2ed;
  /* O filete era #dcdce1, azulado, sobre um papel quente. Na mesma
     luminosidade, na temperatura do papel: some como hairline em
     vez de puxar frio. */
  --line:#ddd9d1;
  --line-dark:#2a2a2e;
}

/* ---------- Cartões que tinham canto reto ----------
   Levantamento: seis componentes com superfície e respiro próprios
   mas raio 0, enquanto os outros 53 usos no site estão em 22px.
   Faixas de página inteira (.page-hero, .section, .related) ficam
   retas de propósito e não entram aqui. */
.payment-card,
.process-card,
.quote,
.legal-note,
.sitemap-card,
.related a{border-radius:var(--raio)}

/* O .payment-card vive sobre a faixa preta, com texto branco: é
   cartão contornado, não preenchido, e continua assim. O defeito
   era só o canto reto e o filete em #262628 escrito à mão, que é
   o --line-dark com outro nome. */
.payment-card{
  border:1px solid var(--line-dark);
  background:transparent;
}

/* ---------- Meus próprios desvios, do turno passado ----------
   As páginas de caso entraram com #d5d2cb e #b4b0a8 escritos à mão,
   que é o mesmo erro que este arquivo está corrigindo. */
.caso-ficha,
.caso-acoes{border-top-color:var(--line)}
.trilha a{border-bottom-color:var(--line)}

/* O botão claro era o único cinza frio (#f1f1f5) que restava sobre o
   papel quente. Mesma luminosidade, temperatura do papel, e o hover
   acompanha um degrau abaixo. */
.btn-light{background:#eceae4}
.btn-light:hover{background:#e0ddd5}

/* ==========================================================
   Refino: blocos em ladrilho e foto por frente
   ========================================================== */

/* ---------- "Continue por aqui" e a ficha da empresa ----------
   Os dois estavam com preenchimento branco e praticamente sem folga:
   o gap do "Continue por aqui" era de 1px e o da ficha nem estava
   declarado, então os cartões encostavam e liam como uma barra única
   partida. Sem o branco por baixo, o que separa passa a ser o ar. */
.related-grid,
.entity-card{
  gap:clamp(20px,2.4vw,38px);
  background:none;
  border:0;
}
.related a,
.entity-card > div{
  background:transparent;
  padding:0;
}

/* O link continua sendo alvo. A tentativa anterior compensava o
   respiro interno com margem negativa, e isso jogava o primeiro
   cartão 23px para fora do container à esquerda e o último 23px
   para fora à direita: a fileira inteira saía do prumo da página.
   Sem margem negativa, o contorno em filete faz o papel que o
   preenchimento branco fazia, sem o peso dele. */
.related a{
  display:block;
  padding:22px 24px;
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--raio);
  transition:background .2s var(--ease,ease),border-color .2s var(--ease,ease);
}
.related-grid strong{display:block;margin-bottom:8px}
.related-grid span{display:block}
.related a:hover{border-color:var(--line-dark)}
.related a:hover h3,
.related a:hover strong{text-decoration:underline;text-underline-offset:3px}

/* A ficha é leitura, não clique: rótulo em caixa alta pequena e o
   valor logo abaixo bastam para separar um item do outro. */
.entity-card{border:0}
.entity-card > div{padding-block:2px}

/* ---------- Foto de cada frente ----------
   A coluna da esquerda tinha só o título e sobrava página. A foto do
   entregável entra embaixo dele, no formato 4:3 em que as imagens já
   foram preparadas. */
.service-foto{
  margin:22px 0 0;
  overflow:hidden;
  border-radius:var(--raio);
  background:#e4e1da;
}
.service-foto img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
}

@media(max-width:860px){
  .service-foto{margin-top:16px}
  .related a{padding:20px 22px}
}

/* ---------- Volte ao topo ----------
   Fica na barra inferior do rodapé, que é onde alguém chega depois de
   ler a página inteira. Âncora de verdade (#inicio), então funciona
   sem JS e o teclado alcança pelo Tab como qualquer link. */
.footer-bottom{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.voltar-topo{
  order:3;
  display:inline-flex;
  gap:10px;
  align-items:center;
  min-height:44px;
  padding:10px 20px;
  border:1px solid var(--line-dark);
  border-radius:var(--raio-pilula);
  color:inherit;
  font-size:13px;
  text-decoration:none;
  transition:background .2s var(--ease,ease),color .2s var(--ease,ease);
}
.voltar-topo:hover{background:#fff;color:var(--ink);border-color:#fff}
.voltar-topo .icon{font-size:14px}

@media(max-width:860px){
  .footer-bottom{gap:14px}
  .voltar-topo{order:-1;width:100%;justify-content:center}
}

/* ==========================================================
   Mobile: alvos de toque
   ==========================================================
   Medido em 375px: campos do formulário em 35 e 37px de altura,
   caixa de seleção em 20x20 e os links de texto em 26px. O piso
   confortável é 44px, e abaixo de 40 o erro de toque sobe muito
   em dedo grande. Nada disso muda o desenho: cresce a área, não
   o traço. */
@media(max-width:860px){
  .field input,
  .field select,
  .field textarea{
    min-height:46px;
    padding-bottom:14px;
  }
  .site-check{min-height:44px}
  .site-check input{
    width:24px;
    height:24px;
  }
  /* O rótulo inteiro da caixa já é clicável por causa do <label for>,
     então ampliar ele amplia o alvo sem desenhar nada novo. */
  .text-link{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .brand{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
}

/* ==========================================================
   Mobile: o resto dos alvos de toque
   ==========================================================
   Medido em 375px: links do rodapé em 19px, botões do aviso de
   cookies em 31px, chips de navegação da página de serviços em
   36px, CTAs de frente em 25px, trilha em 17px e as setas de
   projeto em 39px. Todos abaixo do piso de 44px.

   A área cresce por padding e min-height; nenhum traço muda de
   tamanho, então o desenho continua o mesmo em pé de foto. */
@media(max-width:860px){
  .footer-links a,
  .footer-col a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .cookie-consent__button,
  .cookie-consent button{
    min-height:44px;
    padding-block:12px;
  }
  .jump-nav a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .service-cta{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .trilha a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .caso-passo{min-height:44px}
  .site-check{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}

/* Os três que restaram da varredura: a caixa de seleção do formulário,
   o botão de preferências de cookies e o link de retorno da FAQ. */
@media(max-width:860px){
  .site-check input[type="checkbox"]{width:26px;height:26px}
  .cookie-preferences-button,
  [class*="cookie-preferences"]{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .faq-back,
  .answer-block a,
  .jump-nav + * a{min-height:44px;display:inline-flex;align-items:center}
}

/* O flutuante do WhatsApp fica redondo: é um alvo único, sem rótulo
   ao lado, e círculo é a forma que lê como botão solto na tela. */
.wa-float{
  border-radius:50%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
}

@media(max-width:860px){
  /* Últimos alvos abaixo de 44px: os filtros da FAQ, que vinham
     com 39. */
  .faq-categories a{
    min-height:44px;
    display:flex;
    align-items:center;
  }
  /* Dois que a varredura anterior não cobriu: o breadcrumb do topo
     de página (nav.breadcrumb, diferente do .trilha da página de
     caso, que já tinha o piso) em 19px, e o índice "Nesta página"
     do artigo/sobre em 19px com 14px de vão entre itens. */
  .breadcrumb a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .content-nav a{
    min-height:44px;
    align-items:center;
  }
}

/* O atalho de teclado e a caixa de seleção fechavam a lista em 42 e
   26px. O atalho só aparece no foco, mas quem chega nele chega pelo
   teclado e merece o mesmo piso. */
.skip-link{min-height:44px;display:inline-flex;align-items:center}
.site-check input[type="checkbox"]{width:28px;height:28px}
.site-check{min-height:44px;display:inline-flex;align-items:center;gap:10px}

/* ---------- Portfólio na home ----------
   Só título, imagens e o caminho para a lista completa. Sem nome nem
   setor sob cada imagem: quem quiser saber de quem é entra em
   "Ver todos", que é a página onde a identificação faz falta. */
.projects .section-head{
  display:flex;
  gap:24px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:clamp(26px,3vw,44px);
}
.projects .section-head h2{margin:0;max-width:18ch}
.projects .section-head .btn{flex:none}

@media(max-width:720px){
  .projects .section-head{align-items:stretch}
  .projects .section-head .btn{width:100%;justify-content:space-between}
}

/* ---------- Grades que ficaram com gap de 1px ----------
   Sobra do desenho antigo, em que os cartões eram quadrados e
   encostavam de propósito com um filete entre eles. Depois do
   arredondamento o 1px virou colisão: dois cantos curvos a um
   pixel de distância. Mesma folga dos outros ladrilhos do site. */
.process-grid,
.sitemap-grid{gap:clamp(14px,1.8vw,26px)}

/* O bloco de imagem abre o cartão do blog, então acompanha a curva
   de cima dele em vez de cortar o canto em ângulo reto. */
.article-media,
.media-placeholder,
.featured-media{
  border-radius:var(--raio) var(--raio) 0 0;
  overflow:hidden;
}

/* ---------- Contatos do rodapé ----------
   Ícone e texto na mesma linha de base, com o ícone um pouco mais
   apagado que o texto: ele ilustra, não compete. */
.site-footer address a,
.site-footer address span{
  display:inline-flex;
  gap:10px;
  align-items:center;
}
.site-footer address .icon{
  font-size:16px;
  flex:none;
  opacity:.55;
}
.site-footer address a:hover .icon{opacity:1}


/* ---------- Proporção do rodapé ----------
   A coluna de contato pede 232px por causa do e-mail inteiro, e o
   vão entre marca e links chegava a 180px. Sobravam 85px para
   Navegação e Institucional, então "Sobre a Baze", "Mapa do site" e
   "Prazos e pagamento" quebravam em duas linhas cada.
   O vão encolhe e o bloco de links ganha a largura que precisa. */
@media(min-width:861px){
  .footer-main{
    grid-template-columns:minmax(0,1fr) minmax(560px,auto);
    gap:clamp(48px,5vw,96px);
  }
  .site-footer .footer-links{
    grid-template-columns:minmax(120px,1fr) minmax(130px,1fr) minmax(max-content,1.2fr);
    gap:clamp(24px,2.6vw,44px);
  }
}

/* ---------- Corpo do caso ----------
   Entrou no lugar do marcador tracejado, agora que o texto existe.
   Medida de leitura curta: são três a quatro parágrafos corridos e
   linha longa cansa antes do fim. */
.caso-corpo{
  margin:30px 0 0;
  max-width:68ch;
}
.caso-corpo p{
  margin:0 0 16px;
  font-size:16px;
  line-height:1.65;
  color:#3d3d44;
}

/* ---------- Frentes no tablet: carrossel horizontal ----------
   Entre celular e desktop a pilha com clique na lista lateral fica
   apertada: não cabe a leitura em duas colunas nem sobra espaço para
   o índice ao lado. Na faixa de 641–980px a pilha empilhada vira
   carrossel horizontal com scroll-snap: os cartões ficam lado a
   lado, o subtítulo sai (o título já basta) e a lista de nomes e as
   setas saem porque arrastar o próprio cartão já navega. */
@media(min-width:641px) and (max-width:980px){
  .frentes-intro p{display:none}
  .frentes-lista,
  .frentes-navegacao{display:none}

  .frentes-pilha{
    display:flex;
    align-items:stretch;
    gap:16px;
    min-height:0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:14px;
  }
  .frentes-pilha .frente-card,
  .frentes-pilha .frente-card[data-ativo="true"],
  .frentes-pilha .frente-card[data-oculto="true"]{
    position:relative;
    inset:auto;
    flex:0 0 78%;
    height:clamp(420px,66vw,520px);
    scroll-snap-align:start;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,42%) minmax(0,1fr);
    transform:none;
    opacity:1;
    pointer-events:auto;
  }
}
.caso-corpo p:last-child{margin-bottom:0}