/* ==========================================================================
   NM Optimize, site institucional
   Identidade da casa: fundo preto, gradiente rosa -> roxo, âmbar de apoio.
   Ver identidade/design-guide.md na raiz do repositório.
   ========================================================================== */

:root{
  --bg: #08070c;
  --painel: #100e16;
  --card: #181521;
  --borda: #2a2536;
  --texto: #ffffff;
  --texto-fraco: #9a94ab;
  --texto-fantasma: #5f596e;
  --rosa: #F40C47;
  --roxo: #5304BF;
  --ambar: #FBB51F;

  --envelope: 1320px;
  --gutter: clamp(20px, 5vw, 64px);
  --fio: 1px solid var(--borda);

  --easing: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* o Lenis cuida da rolagem suave */
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: "Ba Jamjuree", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body[data-travado="true"]{ overflow: hidden; height: 100vh; }

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }

::selection{ background: var(--rosa); color: #fff; }

/* --------------------------------------------------------------- tipografia */

.display{
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}
.display--gigante{ font-size: clamp(2.4rem, 5.6vw, 5.4rem); }
.display--alta{ font-size: clamp(1.9rem, 4.6vw, 4.1rem); }
.display--media{ font-size: clamp(1.5rem, 2.8vw, 2.6rem); }

.rotulo{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin: 0;
}

.lead{
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  color: var(--texto-fraco);
  max-width: 46ch;
  margin: 0;
}

.gradiente{
  background: linear-gradient(100deg, var(--rosa), var(--roxo) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------------ layout */

.envelope{
  width: 100%;
  max-width: var(--envelope);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.secao{ padding: clamp(70px, 11vh, 130px) 0; position: relative; }
.fio{ border: none; border-top: var(--fio); margin: 0 0 clamp(32px, 5vw, 58px); }

.cabeca-secao{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(30px, 5vw, 56px);
  flex-wrap: wrap;
}

.pular{
  position: absolute; left: -9999px; top: 0;
  background: var(--rosa); color: #fff; padding: 10px 16px; z-index: 999;
}
.pular:focus{ left: 12px; top: 12px; }

:focus-visible{ outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 4px; }

/* ----------------------------------------------------------------- loader */

.carregando{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 26px;
  clip-path: inset(0 0 0 0);
}
.carregando[data-pronto="true"]{ pointer-events: none; }
.carregando-marca{
  width: 62px; height: 62px;
  object-fit: contain;
  opacity: .92;
}
.carregando-barra{
  width: min(210px, 44vw);
  height: 2px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
  border-radius: 2px;
}
.carregando-preenche{
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--rosa), var(--roxo));
}
.carregando-conta{
  font-variant-numeric: tabular-nums;
  color: var(--texto-fraco);
  font-size: 11px;
  letter-spacing: .18em;
}

/* ----------------------------------------------------------------- cursor */

/* Sem bolinha. O que segue o mouse é uma luz difusa, sem borda nenhuma.
   Com mix-blend-mode:screen ela só clareia o que é escuro: o fundo acende
   de leve na passagem e o texto branco fica intacto. */
#cursor-luz{
  position: fixed;
  top: 0; left: 0;
  width: 620px; height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 90;
  display: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle closest-side,
    rgba(150, 40, 190, .30) 0%,
    rgba(96, 22, 150, .17) 34%,
    rgba(50, 12, 90, .07) 60%,
    transparent 78%);
  will-change: transform;
  transition: opacity .4s;
}
body[data-ponteiro="fino"][data-cursor-pronto="sim"] #cursor-luz{ display: block; }
body[data-cursor-fora="sim"] #cursor-luz{ opacity: 0; }

/* barra fina de progresso da página, no topo */
#progresso{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 120;
  background: linear-gradient(90deg, var(--rosa), var(--roxo));
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ------------------------------------------------------------ painel / menu */

.painel{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

/* A barra é uma pílula flutuante centralizada, não uma faixa colada no topo:
   deixa o fundo animado respirar em vez de cobri-lo com um bloco escuro. */
.painel-barra{
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 48px);
  padding: 12px 14px 12px 20px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 100px;
  background: rgba(16, 14, 22, .55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background .4s, border-color .4s;
}
.painel[data-aberto="true"] .painel-barra{
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.painel-marca{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: 16px;
}
.painel-marca img{ width: 26px; height: 26px; object-fit: contain; }

.painel-status{
  display: none;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-fantasma);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 760px){ .painel-status{ display: inline-flex; gap: 8px; align-items: center; } }
.painel-status i{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ambar);
  display: inline-block;
  animation: pulso 2.4s infinite;
}
@keyframes pulso{ 0%,100%{ opacity: .35 } 50%{ opacity: 1 } }

.painel-toggle{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  align-items: center;
  border-radius: 100px;
  background: rgba(255,255,255,.06);
  transition: background .3s;
}
.painel-toggle:hover{ background: rgba(255,255,255,.13); }
.painel-toggle span{
  display: block; height: 1.5px; background: var(--texto);
  transition: transform .4s var(--easing), width .4s var(--easing), opacity .25s;
}
.painel-toggle span:nth-child(1){ width: 26px; }
.painel-toggle span:nth-child(2){ width: 18px; }
.painel[data-aberto="true"] .painel-toggle span:nth-child(1){ width: 24px; transform: translateY(3.25px) rotate(45deg); }
.painel[data-aberto="true"] .painel-toggle span:nth-child(2){ width: 24px; transform: translateY(-3.25px) rotate(-45deg); }

/* O menu não é tela cheia. Ele é um painel curto que desce da própria
   pílula do topo, no mesmo raio e no mesmo vidro. Tela cheia com item
   gigante foi reprovado pelo Nairon (04/09/2026): "abre esse negócio
   gigante, tá feio". */
.painel-corpo{
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: min(430px, calc(100vw - 2 * var(--gutter)));
  padding: 62px 0 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  background: rgba(16, 14, 22, .82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  overflow: hidden;
  transform-origin: top center;
  clip-path: inset(0 0 100% 0 round 26px);
  opacity: 0;
  transition: clip-path .5s var(--easing), opacity .3s;
}
.painel[data-aberto="true"] .painel-corpo{
  clip-path: inset(0 0 0 0 round 26px);
  opacity: 1;
}
/* com o painel aberto a pílula perde o fundo próprio pra não ficar
   uma borda dentro da outra */
.painel[data-aberto="true"] .painel-barra{
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.painel-nav{ display: flex; flex-direction: column; }

.painel-item{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 15px;
  font-weight: 600;
  transition: background .25s;
}
.painel-item:hover{ background: rgba(255,255,255,.05); }
.painel-item-n{
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--texto-fantasma);
  min-width: 20px;
}
.painel-mascara{ display: block; overflow: hidden; }
.painel-rotulo{
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  transform: translateY(0);
  transition: color .25s;
}
.painel-item:hover .painel-rotulo{ color: var(--rosa); }
.painel-item .seta{
  margin-left: auto;
  color: var(--texto-fantasma);
  font-size: 13px;
  transform: translateX(-6px);
  opacity: 0;
  transition: transform .3s var(--easing), opacity .3s;
}
.painel-item:hover .seta{ transform: translateX(0); opacity: 1; }

.painel-rodape{
  padding: 16px 18px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}
.painel-acoes{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.painel-acoes .botao{ justify-content: center; padding: 12px 10px; font-size: 12.5px; }
.painel-rodape .rotulo{
  display: block;
  margin-top: 13px;
  font-size: 9.5px;
  letter-spacing: .13em;
  text-align: center;
  color: var(--texto-fantasma);
}

/* -------------------------------------------------------------- botões */

.botao{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid var(--borda);
  background: transparent;
  transition: border-color .3s, background .3s, transform .3s var(--easing), color .3s;
}
.botao:hover{ border-color: rgba(255,255,255,.55); transform: translateY(-2px); }
.botao--cheio{
  background: linear-gradient(100deg, var(--rosa), var(--roxo));
  border-color: transparent;
  color: #fff;
}
.botao--cheio:hover{ border-color: transparent; filter: brightness(1.1); }
.botao--grande{ padding: 17px 30px; font-size: 15px; }

.link-fio{
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link-fio::after{
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--easing);
}
.link-fio:hover::after{ transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------- contato lateral */

/* Verde do WhatsApp, não o gradiente da marca: é o código de cor que a
   pessoa reconhece sem ler. No celular vira botão redondo de 58px, que é
   tamanho de dedo. O anterior encolhia demais e sumia. */
.atalho-zap{
  position: fixed;
  right: clamp(16px, 2.4vw, 26px);
  bottom: clamp(16px, 2.4vw, 26px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 20px 13px 14px;
  border-radius: 100px;
  background: #25D366;
  color: #08301a;
  border: none;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(37,211,102,.28), 0 4px 12px rgba(0,0,0,.4);
  transition: transform .35s var(--easing), box-shadow .3s, opacity .35s;
  opacity: 0;
  transform: translateY(20px);
}
.atalho-zap[data-visivel="true"]{ opacity: 1; transform: translateY(0); }
.atalho-zap[data-escondido="sim"]{ opacity: 0; pointer-events: none; transform: translateY(14px); }
.atalho-zap:hover{ transform: translateY(-3px); box-shadow: 0 14px 36px rgba(37,211,102,.4); }
.atalho-zap svg{ width: 26px; height: 26px; flex: 0 0 auto; fill: #08301a; }

@media (max-width: 700px){
  .atalho-zap{
    width: 58px; height: 58px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .atalho-zap span{ display: none; }
  .atalho-zap svg{ width: 30px; height: 30px; }
}

/* -------------------------------------------------------------------- hero */

.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(28px, 6vh, 60px);
  overflow: hidden;
}
#tela-hero{
  position: absolute;
  inset: -6% -2%;
  width: 104%; height: 112%;
  z-index: 0;
  opacity: 1;
  will-change: transform;
}
/* Véu leve: escurece só o rodapé e as pontas, o suficiente pro texto ter
   contraste sem apagar o movimento do fundo. */
.hero-veu{
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(115% 75% at 62% 8%, rgba(8,7,12,0) 0%, rgba(8,7,12,.14) 58%, rgba(8,7,12,.5) 100%),
    linear-gradient(to bottom, rgba(8,7,12,.35) 0%, rgba(8,7,12,0) 24%, rgba(8,7,12,0) 52%, rgba(8,7,12,.78) 97%);
  pointer-events: none;
}

/* headline embaixo à esquerda, apoio embaixo à direita */
.hero-envelope{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vh, 40px);
  align-items: end;
}
@media (min-width: 1000px){
  .hero-envelope{
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: clamp(30px, 5vw, 90px);
  }
}

.hero-titulo{ margin: 0; }
.hero-apoio{ display: flex; flex-direction: column; gap: clamp(20px, 3vh, 30px); padding-bottom: 8px; }
.hero-lead{ margin: 0; max-width: 34ch; }
.hero-acoes{ display: flex; flex-wrap: wrap; gap: 12px; }

.hero-fio{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px var(--gutter) 0;
  max-width: var(--envelope);
  margin: clamp(28px, 6vh, 56px) auto 0;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.12);
  font-variant-numeric: tabular-nums;
}
.hero-fio > :nth-child(2){ justify-self: center; }
.hero-fio > :nth-child(3){ justify-self: end; }
@media (max-width: 700px){
  .hero-fio{ grid-template-columns: 1fr auto; }
  .hero-fio > :nth-child(3){ display: none; }
}
.hero-role{ display: inline-flex; align-items: center; gap: 8px; }
@media (min-width: 880px){ .hero-fio{ padding-right: calc(var(--gutter) + 210px); } }
.hero-role i{ display: inline-block; animation: desce 2s infinite var(--easing); font-style: normal; }
@keyframes desce{ 0%,100%{ transform: translateY(0); opacity: .5 } 50%{ transform: translateY(4px); opacity: 1 } }

/* revelação de texto por linha */
.reveal-linha{ display: block; overflow: hidden; padding-bottom: .06em; }
.reveal-linha > span{ display: block; }

/* mesma ideia, mas para blocos que o JS fatia em linhas depois que o
   navegador já quebrou o texto (ver fatiarEmLinhas em site.js) */
.linha-mascara{ display: block; overflow: hidden; padding-bottom: .06em; }
.linha-corpo{ display: block; will-change: transform; }
[data-linhas]:not([data-anima="pronto"]){ opacity: 0; }
[data-linhas][data-anima="pronto"]{ opacity: 1; }

/* ---------------------------------------------------------------- marquee */

.marquee{
  border-top: var(--fio);
  border-bottom: var(--fio);
  padding: 18px 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--painel);
}
.marquee-trilha{
  display: inline-flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  animation: correr 42s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-trilha{ animation-play-state: paused; }
@keyframes correr{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
.marquee-item{
  display: inline-flex;
  align-items: center;
  gap: 34px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.marquee-item i{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--rosa);
  display: inline-block;
}

/* -------------------------------------------------------------- manifesto */

.manifesto{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
@media (min-width: 900px){
  .manifesto{ grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
}
.manifesto-texto{ max-width: 22ch; }
@media (min-width: 900px){ .manifesto-texto{ max-width: 18ch; } }


/* --------------------------------------------------------------- anúncio */
/* Divisor de seção em texto gigante. O contorno estava apagado demais na
   primeira versão; agora fecha bem mais claro. */
.anuncio{ padding: clamp(26px, 6vh, 60px) 0; overflow: hidden; }
.anuncio-texto{
  font-size: clamp(3.6rem, 17vw, 15rem);
  line-height: .82;
  letter-spacing: -.05em;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255,255,255,.30);
  margin: 0;
}
@media (max-width: 700px){ .anuncio-texto{ -webkit-text-stroke-width: 1px; } }

/* ----------------------------------------------------------------- cases */

.nota-privacidade{
  max-width: 54ch;
  font-size: 14px;
  color: var(--texto-fantasma);
  margin-bottom: clamp(24px, 4vw, 40px);
  padding-left: 14px;
  border-left: 2px solid var(--borda);
}

.nota-servicos{
  max-width: 54ch;
  font-size: 14px;
  color: var(--texto-fantasma);
  margin: 0 0 clamp(24px, 4vw, 38px);
  padding-left: 14px;
  border-left: 2px solid var(--borda);
}

.lista-cases{ border-top: var(--fio); }

.caso{ border-bottom: var(--fio); }

.caso-topo{
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  padding: clamp(20px, 3.2vw, 34px) 0;
  text-align: left;
  transition: color .3s;
}
.caso-n{ color: var(--texto-fantasma); font-size: 11px; letter-spacing: .16em; }
.caso-nome{
  font-size: clamp(1.35rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
  transition: transform .45s var(--easing);
}
.caso-topo:hover .caso-nome{ transform: translateX(10px); }
.caso-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.caso-tag{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  border: 1px solid var(--borda);
  border-radius: 100px;
  padding: 4px 11px;
}
.caso-sinal{
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--texto-fantasma);
  white-space: nowrap;
  transition: color .3s;
}
.caso-topo:hover .caso-sinal{ color: var(--texto); }
.caso[data-aberto="true"] .caso-sinal{ color: var(--rosa); }

/* mini tira de prévia que aparece no hover, no desktop */
.caso-previa{
  position: absolute;
  right: 130px;
  top: 50%;
  width: 190px;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--borda);
  transform: translateY(-50%) scale(.9) rotate(-3deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--easing), transform .5s var(--easing);
  display: none;
}
@media (min-width: 1050px){ .caso-previa{ display: block; } }
.caso-topo:hover .caso-previa{ opacity: 1; transform: translateY(-50%) scale(1) rotate(-2deg); }
.caso[data-aberto="true"] .caso-previa{ opacity: 0; }
.caso-previa img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* painel expansível: truque de grid 0fr -> 1fr */
.caso-painel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--easing);
}
.caso[data-aberto="true"] .caso-painel{ grid-template-rows: 1fr; }
.caso-painel-interno{ overflow: hidden; min-height: 0; }
.caso-painel-conteudo{
  padding-bottom: clamp(26px, 4vw, 44px);
  display: grid;
  gap: 24px;
}
@media (min-width: 900px){
  .caso-painel-conteudo{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 40px; align-items: start; }
}
.caso-texto{ color: var(--texto-fraco); font-size: 15px; line-height: 1.65; margin: 0 0 18px; }
.caso-lista{ list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.caso-lista li{
  font-size: 13.5px; color: var(--texto-fraco);
  display: flex; gap: 10px; align-items: baseline;
}
.caso-lista li::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rosa); flex: 0 0 auto; }
.caso-nota{
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-fantasma); border: 1px solid var(--borda);
  border-radius: 100px; padding: 6px 13px; display: inline-block;
}

.caso-galeria{
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.caso-shot{
  border: 1px solid var(--borda);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
}
.caso-shot img{ width: 100%; height: auto; display: block; }
.caso-shot--desktop img{ max-height: 420px; object-fit: cover; object-position: top center; }

/* -------------------------------------------------------------- serviços */

.servicos{ display: grid; gap: 18px; }
@media (min-width: 860px){ .servicos{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; } }
.servico{
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--painel);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .35s, transform .45s var(--easing), background .35s;
}
.servico:hover{ border-color: rgba(244,12,71,.5); transform: translateY(-4px); background: var(--card); }
.servico-n{ font-size: 11px; letter-spacing: .16em; color: var(--texto-fantasma); }
.servico-titulo{ font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.15; }
.servico-desc{ color: var(--texto-fraco); font-size: 14.5px; line-height: 1.6; margin: 0; }
.servico-itens{ list-style: none; margin: auto 0 0; padding: 14px 0 0; border-top: var(--fio); display: grid; gap: 8px; }
.servico-itens li{ font-size: 13px; color: var(--texto-fraco); display: flex; gap: 9px; align-items: baseline; }
.servico-itens li::before{ content: "+"; color: var(--rosa); font-weight: 700; }

/* ----------------------------------------------------------------- régua */

.regua{ position: relative; display: grid; gap: 0; }
/* trilho que se desenha conforme a seção passa pela tela */
.regua-trilho{
  position: absolute;
  left: 3px; top: 0; bottom: 0;
  width: 1px;
  background: var(--borda);
  pointer-events: none;
}
.regua-progresso{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--rosa), var(--roxo));
  transform: scaleY(0);
  transform-origin: top center;
}
@media (max-width: 859px){ .regua-trilho{ display: none; } }
.regua-etapa{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  padding: clamp(20px, 3vw, 30px) 0;
  border-top: var(--fio);
  align-items: baseline;
}
/* no celular a descrição ocupa a linha inteira, senão ela cai na coluna
   estreita do número e quebra uma palavra por linha */
@media (max-width: 859px){
  .regua-desc{ grid-column: 1 / -1; }
}
.regua-etapa:last-child{ border-bottom: var(--fio); }
@media (min-width: 860px){
  .regua-etapa{ grid-template-columns: 90px minmax(0, 260px) minmax(0, 1fr); gap: 30px; align-items: baseline; }
}
.regua-n{
  font-size: 11px; letter-spacing: .16em; color: var(--texto-fantasma);
  display: inline-flex; align-items: center; gap: 9px;
}
.regua-n i{ width: 7px; height: 7px; border-radius: 50%; background: var(--borda); display: inline-block; transition: background .4s; }
.regua-etapa:hover .regua-n i{ background: var(--rosa); }
.regua-titulo{ font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.2; }
.regua-desc{ color: var(--texto-fraco); font-size: 14.5px; line-height: 1.6; margin: 6px 0 0; }
@media (min-width: 860px){ .regua-desc{ margin: 0; } }
.regua-etapa[data-destaque="true"] .regua-titulo{ color: var(--ambar); }

/* ------------------------------------------------------------------ sobre */

.sobre-palco{ display: grid; gap: 30px; }
@media (min-width: 980px){ .sobre-palco{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.sobre-copy p{ color: var(--texto-fraco); font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.65; margin: 0 0 16px; }
.sobre-copy p:last-child{ margin-bottom: 0; }
.sobre-copy strong{ color: var(--texto); font-weight: 600; }

.pilares{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pilar{ padding: 20px 0; border-top: var(--fio); }
.pilar:last-child{ border-bottom: var(--fio); }
.pilar-nome{ font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 12px; }
.pilar-nome::before{ content: ""; width: 18px; height: 1px; background: var(--rosa); flex: 0 0 auto; }
.pilar-texto{ color: var(--texto-fraco); font-size: 14px; line-height: 1.6; margin: 8px 0 0 30px; }


/* ----------------------------------------------------------------- rodapé */

.rodape{ padding: clamp(60px, 9vh, 110px) 0 34px; border-top: var(--fio); background: var(--painel); }
.rodape-chamada{
  display: flex; flex-wrap: wrap; gap: 26px;
  align-items: center; justify-content: space-between;
  padding-bottom: clamp(40px, 6vw, 70px);
}
.rodape-grade{
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: var(--fio);
}
.rodape-col p.rotulo{ margin-bottom: 12px; }
.rodape-linha{ display: block; font-size: 14.5px; color: var(--texto-fraco); margin-bottom: 6px; }
.rodape-linha:hover{ color: var(--texto); }
.rodape-base{
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  padding-top: 24px; border-top: var(--fio);
}

/* ------------------------------------------------------- animação de entrada */

[data-anima]{ opacity: 0; transform: translateY(26px); }
[data-anima="pronto"]{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-anima]{ opacity: 1 !important; transform: none !important; }
  .painel-rotulo{ transform: none !important; }
}

/* ==========================================================================
   BLOG
   Listagem em /blog/ e artigos em /blog/<slug>/. Mesma linguagem visual do
   restante do site, com a coluna de leitura estreita pra não cansar a vista.
   ========================================================================== */

/* topo interno das páginas que não são a home */
.topo-interno{
  padding: clamp(120px, 20vh, 190px) 0 clamp(40px, 6vh, 70px);
  border-bottom: var(--fio);
  position: relative;
  overflow: hidden;
}
.topo-interno::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 15% 0%, rgba(83,4,191,.22), transparent 62%);
  pointer-events: none;
}
.topo-interno .envelope{ position: relative; z-index: 1; }
.topo-titulo{ margin: 14px 0 18px; max-width: 20ch; }
.migalha{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-fantasma);
}
.migalha a:hover{ color: var(--texto); }

/* listagem de posts */
.lista-posts{ border-top: var(--fio); }
.post-linha{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: clamp(22px, 3.2vw, 34px) 0;
  border-bottom: var(--fio);
  transition: background .35s;
}
@media (min-width: 860px){
  .post-linha{ grid-template-columns: 170px minmax(0, 1fr) auto; gap: 30px; align-items: baseline; }
}
.post-data{ font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-fantasma); }
.post-titulo{
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.18; margin: 0;
  transition: transform .45s var(--easing), color .3s;
}
.post-linha:hover .post-titulo{ transform: translateX(8px); color: var(--texto); }
.post-resumo{ color: var(--texto-fraco); font-size: 14.5px; line-height: 1.6; margin: 8px 0 0; max-width: 62ch; }
.post-marca{ font-size: 11px; letter-spacing: .16em; color: var(--texto-fantasma); white-space: nowrap; }
.post-linha:hover .post-marca{ color: var(--rosa); }

/* etiqueta de assunto */
.assunto{
  display: inline-block;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-fraco);
  border: 1px solid var(--borda); border-radius: 100px; padding: 4px 11px;
}

/* corpo do artigo */
.artigo{ padding: clamp(46px, 7vh, 80px) 0 clamp(60px, 9vh, 110px); }
.artigo-corpo{ max-width: 68ch; margin: 0 auto; }
.artigo-corpo > * + *,
.artigo-corpo > p + p,
.artigo-corpo > p + ul,
.artigo-corpo > ul + p,
.artigo-corpo > p + ol,
.artigo-corpo > ol + p{ margin-top: 22px; }
.artigo-corpo p{ font-size: clamp(1rem, 1.25vw, 1.09rem); line-height: 1.75; color: #d6d1e0; margin: 0; }
.artigo-corpo h2{
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 700; letter-spacing: -.025em;
  line-height: 1.2; margin: 46px 0 0; color: var(--texto);
}
.artigo-corpo h3{
  font-size: clamp(1.05rem, 1.7vw, 1.25rem); font-weight: 600; letter-spacing: -.01em;
  margin: 32px 0 0; color: var(--texto);
}
.artigo-corpo ul, .artigo-corpo ol{ margin: 0; padding-left: 0; list-style: none; display: grid; gap: 11px; }
.artigo-corpo ul li{ position: relative; padding-left: 20px; color: #d6d1e0; line-height: 1.65; }
.artigo-corpo ul li::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rosa);
}
.artigo-corpo ol{ counter-reset: passo; }
.artigo-corpo ol li{ position: relative; padding-left: 34px; color: #d6d1e0; line-height: 1.65; counter-increment: passo; }
.artigo-corpo ol li::before{
  content: counter(passo); position: absolute; left: 0; top: 0;
  font-size: 12px; font-weight: 700; color: var(--rosa);
  border: 1px solid var(--borda); border-radius: 50%;
  width: 23px; height: 23px; display: grid; place-items: center;
}
.artigo-corpo strong{ color: #fff; font-weight: 600; }
.artigo-corpo a{ color: #fff; border-bottom: 1px solid var(--rosa); }
.artigo-corpo a:hover{ background: rgba(244,12,71,.12); }

.destaque-caixa{
  border: 1px solid var(--borda);
  border-left: 3px solid var(--ambar);
  border-radius: 0 12px 12px 0;
  background: var(--painel);
  padding: 20px 24px;
}
.destaque-caixa p{ margin: 0; font-size: 15px; color: var(--texto-fraco); }
.destaque-caixa strong{ color: var(--ambar); }

.artigo-cta{
  max-width: 68ch; margin: 56px auto 0;
  border-top: var(--fio); padding-top: 34px;
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
}
.artigo-cta p{ margin: 0; font-size: 15px; color: var(--texto-fraco); max-width: 34ch; }

.artigo-meta{
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-fantasma);
}

/* bloco de posts recentes na home */
.posts-home{ display: grid; gap: 16px; }
@media (min-width: 860px){ .posts-home{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; } }
.post-card{
  border: 1px solid var(--borda); border-radius: 16px; background: var(--painel);
  padding: clamp(22px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .35s, transform .45s var(--easing), background .35s;
}
.post-card:hover{ border-color: rgba(244,12,71,.5); transform: translateY(-4px); background: var(--card); }
.post-card-titulo{ font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 0; }
.post-card-resumo{ font-size: 14px; color: var(--texto-fraco); line-height: 1.6; margin: 0; }
.post-card-ler{ margin-top: auto; padding-top: 12px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-fantasma); }
.post-card:hover .post-card-ler{ color: var(--rosa); }

/* a listagem já vem logo depois do topo interno, que tem respiro próprio:
   sem isso sobra um vão grande demais entre o título e o primeiro post */
.secao--colada{ padding-top: clamp(34px, 5vh, 56px); }

/* dentro do card (flex column) a etiqueta estica pra largura toda: prende
   ela no início pra voltar a ter largura de conteúdo */
.post-card .assunto{ align-self: flex-start; }

/* --------------------------------------------------- cases no celular ---
   No desktop a linha do case é "número | nome+tags | sinal". Em 390px isso
   espreme o nome contra as etiquetas. No celular vira empilhado: a linha de
   controle em cima, o nome embaixo, as etiquetas por último. */
@media (max-width: 700px){
  .caso-topo{
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    align-items: center;
  }
  .caso-topo > span:nth-child(2){ grid-column: 1 / -1; }
  .caso-nome{ font-size: 1.5rem; }
  .caso-topo:hover .caso-nome{ transform: none; }
  .caso-meta{ margin-top: 10px; }
  /* as duas capturas lado a lado ficam ilegíveis nessa largura */
  .caso-galeria{ grid-template-columns: 1fr; gap: 14px; }
  .caso-shot--desktop img{ max-height: none; }
}

/* ----------------------------------------------------- FAQ e relacionados */
/* A seção de perguntas alimenta o schema FAQPage: é o que o Google usa pra
   montar resultado expandido na busca. */
.faq{ margin-top: 56px; padding-top: 34px; border-top: var(--fio); }
.faq-titulo{
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 700;
  letter-spacing: -.025em; margin: 0 0 24px;
}
.faq-lista{ display: grid; gap: 22px; }
.faq-item{ padding-left: 16px; border-left: 2px solid var(--borda); }
.faq-pergunta{ font-size: 1.02rem; font-weight: 600; margin: 0 0 7px; color: #fff; line-height: 1.35; }
.faq-resposta{ font-size: 15px; line-height: 1.65; color: var(--texto-fraco); margin: 0; }

.relacionados{
  max-width: 68ch; margin: 52px auto 0;
  padding-top: 30px; border-top: var(--fio);
}
.relacionados .rotulo{ margin-bottom: 16px; }
.relacionados-lista{ display: grid; gap: 10px; }
.relacionado{
  display: grid; gap: 7px;
  padding: 15px 17px;
  border: 1px solid var(--borda); border-radius: 12px;
  background: var(--painel);
  transition: border-color .3s, transform .4s var(--easing), background .3s;
}
.relacionado:hover{ border-color: rgba(244,12,71,.5); transform: translateX(4px); background: var(--card); }
.relacionado .assunto{ justify-self: start; }
.relacionado-titulo{ font-size: 15px; font-weight: 600; line-height: 1.35; }


/* ------------------------------------------------------- aviso de cookies */
/* O GA4 só carrega depois do "aceitar". Sem isso o cookie é gravado antes de
   a pessoa autorizar, que é o ponto que a LGPD cobra. Perde-se um pedaço do
   dado de quem ignora o aviso, e é o preço certo a pagar num site que vende
   pra advogado. */
#cookies{
  position: fixed;
  left: clamp(14px, 2.4vw, 26px);
  bottom: clamp(14px, 2.4vw, 26px);
  z-index: 95;
  width: min(400px, calc(100vw - 2 * clamp(14px, 2.4vw, 26px)));
  padding: 20px 22px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: rgba(16, 14, 22, .93);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s var(--easing), transform .45s var(--easing);
}
#cookies[data-visivel="true"]{ opacity: 1; transform: translateY(0); }
#cookies p{
  margin: 0 0 15px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texto-fraco);
}
#cookies a{ color: #fff; border-bottom: 1px solid var(--rosa); }
#cookies .acoes-cookies{ display: flex; gap: 9px; flex-wrap: wrap; }
#cookies .botao{ padding: 10px 18px; font-size: 12.5px; }

/* no celular ele divide o canto com o atalho de WhatsApp, então sobe */
@media (max-width: 700px){
  #cookies{
    left: 12px; right: 12px; bottom: 84px;
    width: auto;
    padding: 17px 18px;
  }
}

/* ------------------------------------------------------- página de texto */
.texto-legal{ max-width: 68ch; margin: 0 auto; }
/* `.texto-legal p{margin:0}` tem especificidade maior que `> * + *` e
   anulava o espaço. Por isso o seletor abaixo é mais específico. */
.texto-legal > * + *,
.texto-legal > p + p,
.texto-legal > p + ul,
.texto-legal > ul + p{ margin-top: 20px; }
.texto-legal p, .texto-legal li{ font-size: 16px; line-height: 1.75; color: #d6d1e0; margin: 0; }
.texto-legal h2{
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700;
  letter-spacing: -.02em; margin: 42px 0 0; color: #fff;
}
.texto-legal ul{ margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.texto-legal ul li{ position: relative; padding-left: 20px; }
.texto-legal ul li::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rosa);
}
.texto-legal strong{ color: #fff; font-weight: 600; }
.texto-legal .atualizado{
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-fantasma);
}