.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Cream:#FFFCF5; --Mist:#ECEEE8; --Sand:#CEB8A1; --Gold:#BA9A78; --Cocoa:#593F39; --Espresso:#322320; --Ink:#191110; --Slate:#3E4A66; --White:#FFFFFF; --Surface:#FFFFFF; --Surface-2:#FAF6EE; --Surface-3:#F1EADD; --Text:#191110; --Text-2:#593F39; --Text-3:#7A665C; --Text-Inverse:#FFFCF5; --Text-2-Inverse:#CEB8A1; --Text-Accent:#78593B; --Text-Accent-Inverse:#BA9A78; --Border:#E8E0D2; --Border-Strong:#CEB8A1; --Focus-Ring:#8A6A48; --Accent:#BA9A78; --Accent-Hover:#A8875F; --Accent-Soft:#F3EADD; --Space-1:4px; --Space-2:8px; --Space-3:12px; --Space-4:16px; --Space-5:20px; --Space-6:24px; --Space-8:32px; --Space-10:40px; --Space-12:48px; --Space-16:64px; --Space-20:80px; --Space-32:128px; --Radius-XS:6px; --Radius-SM:10px; --Radius-MD:14px; --Radius-LG:20px; --Radius-XL:28px; --Radius-Pill:999px; --WE2-Sans:Inter; --WE2-Editorial:Instrument Serif; }
/* Start custom CSS *//* ===== WE2 · animações e efeitos que o painel do Elementor não expressa =====
   Mexer aqui só para a animação. Cor, espaço e tamanho ficam nas variáveis e
   classes globais, editáveis no painel. ==================================== */

/* Mural do hero: cada fileira traz o mesmo conjunto de fotos duas vezes, então
   andar exatamente metade recoloca tudo no ponto de partida, sem emenda. */
@keyframes we2-sobe  { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes we2-desce { from { transform: translateY(-50%); } to { transform: translateY(0); } }

#we2-fileira-1 { animation: we2-sobe  110s linear infinite; }
#we2-fileira-2 { animation: we2-desce  91s linear infinite; }
#we2-fileira-3 { animation: we2-sobe   93s linear infinite; }
#we2-fileira-4 { animation: we2-desce  90s linear infinite; }
#we2-fileira-5 { animation: we2-sobe   94s linear infinite; }
#we2-fileira-6 { animation: we2-desce  92s linear infinite; }

/* Todas andam a ~16 px/s. A coluna 1 tem 6 fotos e as outras 5, por isso ela
   leva 110s: é o que mantém o mesmo ritmo na tela. */

/* Véu do hero: brilho redondo escuro atrás do logotipo mais o degradê vertical.
   São dois gradientes sobrepostos; o painel do Elementor faz só um. */
.elementor .we2-veu {
  background-image:
    radial-gradient(46% 40% at 50% 47%, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.48) 46%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.60) 8%, rgba(0,0,0,0.06) 22%, rgba(0,0,0,0.04) 52%, rgba(0,0,0,0.48) 78%, rgba(0,0,0,0.84) 100%);
  pointer-events: none;
}

/* Faixa de logotipos: a secao dela agora tem o mesmo recuo lateral das outras,
   para o rotulo "Brands we have worked with" alinhar com o Services logo
   abaixo. A faixa sangra de volta ate a borda com margem negativa (na classe
   global, editavel no painel) mais esta largura. So a margem negativa nao
   basta: ela desloca a faixa para a esquerda mas nao aumenta a largura,
   porque a faixa tem overflow hidden e nao estica junto com o container.
   MEDIDO: sem isto a faixa ficava 48px mais curta que a tela. */
.elementor .we2-faixa-logos.we2-faixa-logos { width: calc(100% + 48px); }
@media (max-width: 767px) {
  .elementor .we2-faixa-logos.we2-faixa-logos { width: calc(100% + 40px); }
}

/* Faixa de logotipos: mesma ideia, deitada. */
@keyframes we2-esquerda { from { transform: translateX(0); } to { transform: translateX(-100%); } }
#we2-logos-1, #we2-logos-2 { animation: we2-esquerda 46s linear infinite; }

/* A pista precisa ter a largura do proprio conteudo, senao ela fica do tamanho
   da tela e os logos transbordam para dentro da pista seguinte, um por cima do
   outro. MEDIDO no celular: a pista saia com 375px quando o conteudo tem
   1672px. O flex: 0 0 auto da classe global nao resolve sozinho; e preciso
   dizer max-content. Isso tambem e o que faz o laco fechar sem emenda, porque
   o translateX(-100%) anda exatamente uma pista. */
.elementor .we2-faixa-pista.we2-faixa-pista { width: max-content; }

/* O mural perde colunas conforme a janela fica mais alta do que larga. Sem isso
   os quadros 4:5 encolhem, a fileira fica mais curta que a tela e abre um
   buraco escuro no meio da coluna. O Elementor só quebra por largura. */
@media (max-aspect-ratio: 5 / 4) {
  .elementor .we2-mural-coluna:nth-child(6) { display: none; }
  .elementor .we2-mural.we2-mural { opacity: 0.92; }
}
@media (max-aspect-ratio: 1 / 1) {
  .elementor .we2-mural-coluna:nth-child(5) { display: none; }
}
@media (max-aspect-ratio: 3 / 4) {
  .elementor .we2-mural-coluna:nth-child(4) { display: none; }
}
@media (max-width: 767px) {
  .elementor .we2-mural-coluna:nth-child(3) { display: none; }
  /* No celular o mural sangra ate a borda: sem padding, as duas colunas
     preenchem a tela inteira e some a faixa marrom do fundo nas laterais. */
  .elementor .we2-mural.we2-mural { opacity: 1; gap: 6px; padding: 0; }
  .elementor .we2-mural-foto { margin-block-end: 6px; }
  .elementor .we2-mural-foto.we2-mural-foto { border-radius: 14px; }
  /* Veu proprio do celular. A tela e alta e estreita, entao as faixas escuras
     de cima e de baixo pesam muito mais do que no desktop. O brilho redondo
     fica mais largo porque o logotipo ocupa quase toda a largura. */
  .elementor .we2-veu {
    background-image:
      radial-gradient(72% 32% at 50% 46%, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.44) 52%, rgba(0,0,0,0) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.42) 10%, rgba(0,0,0,0.03) 26%, rgba(0,0,0,0.02) 58%, rgba(0,0,0,0.34) 82%, rgba(0,0,0,0.76) 100%);
  }
}

/* Rede de segurança: se nenhuma regra acima cobrir o formato da janela, cinco
   quadros de 19vh já passam da altura da tela e o laço não abre. */
.elementor .we2-mural-foto { min-height: 19vh; }

/* Quem pede menos animação no sistema vê o mural parado. */
@media (prefers-reduced-motion: reduce) {
  #we2-fileira-1, #we2-fileira-2, #we2-fileira-3,
  #we2-fileira-4, #we2-fileira-5, #we2-fileira-6,
  #we2-logos-1, #we2-logos-2 { animation: none; }
}

/* Texto sobre fundo escuro.
   O Elementor gera as classes globais em ordem própria, e .we2-corpo acabava
   ganhando de .we2-texto-claro por vir depois no arquivo. Repetir a classe no
   seletor eleva a especificidade e resolve sem depender de ordem nenhuma. */
.elementor .we2-texto-claro.we2-texto-claro     { color: var(--Text-Inverse); }
.elementor .we2-texto-2-claro.we2-texto-2-claro { color: var(--Text-2-Inverse); }
.elementor .we2-olho-claro.we2-olho-claro       { color: var(--Text-Accent-Inverse); }
.elementor .we2-stat-valor.we2-stat-valor       { color: var(--Text-Inverse); }

/* O tema Astra define cor de título direto no elemento e ganharia dos nossos
   títulos. Mesma técnica. */
.elementor .we2-h1.we2-h1, .elementor .we2-h2.we2-h2, .elementor .we2-h3.we2-h3 { color: var(--Text); }
.elementor .we2-h1.we2-texto-claro, .elementor .we2-h2.we2-texto-claro { color: var(--Text-Inverse); }

/* Linha de serviço: só o filete de cima. O painel do Elementor descarta valores
   zero nas outras bordas, o que fazia a caixa fechar nos quatro lados. */
.elementor .we2-linha-servico { border: 0; border-top: 1px solid var(--Border); }

/* ===== BLINDAGEM CONTRA OS PADRÕES DO ELEMENTOR E DO ASTRA =====
   Os dois definem cor de botão e de título com força. Repetir a classe no
   seletor levanta a especificidade e faz a nossa regra ganhar sem !important. */
.elementor .we2-btn.we2-btn { text-decoration: none; }
.elementor .we2-btn-primario.we2-btn-primario { background-color: var(--Ink); color: var(--Cream); border: 0; }
.elementor .we2-btn-claro.we2-btn-claro       { background-color: var(--Cream); color: var(--Ink); border: 0; }
.elementor .we2-btn-fantasma.we2-btn-fantasma { background-color: transparent; color: var(--Text-Inverse); border: 1px solid var(--Border-Strong); }
.elementor .we2-link.we2-link { background: none; border: 0; padding: 0; min-height: 0; }

/* Fundo do hero: o degradê da marca, não preto chapado. Era isso que deixava
   o mural escuro demais, porque o preto puro come a foto por baixo do véu. */
.elementor .we2-hero.we2-hero {
  padding: 0;
  background-image: radial-gradient(120% 90% at 20% 15%, #593f39 0%, #322320 45%, #191110 100%);
}

/* Lista de tópicos com o quadradinho dourado, como no nosso site. */
.elementor .we2-lista-tiques > p { position: relative; padding-left: 28px; }
.elementor .we2-lista-tiques > p::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 10px; height: 10px; background: var(--Sand);
}

/* Trilho: barra de rolagem visível e discreta. */
.elementor .we2-trilho { scrollbar-width: thin; scrollbar-color: var(--Sand) transparent; padding-bottom: 12px; }
.elementor .we2-trilho::-webkit-scrollbar { height: 6px; }
.elementor .we2-trilho::-webkit-scrollbar-thumb { background: var(--Sand); border-radius: 999px; }

/* Foto do trilho e dos cards: cresce um pouco quando o cursor chega. */
@media (hover: hover) {
  .elementor .we2-trilho-cartao img { transition: transform 280ms ease-out; }
  .elementor .we2-trilho-cartao:hover img { transform: scale(1.02); }
}

/* Chamada final: o gradiente de assinatura da marca. São quatro camadas
   sobrepostas; o painel do Elementor faz uma só. */
.elementor .we2-assinatura-fundo {
  background-image:
    radial-gradient(60% 80% at 15% 20%, #e6dccd 0%, transparent 60%),
    radial-gradient(50% 70% at 85% 30%, #ceb8a1 0%, transparent 60%),
    radial-gradient(70% 90% at 60% 100%, #6e5048 0%, transparent 65%),
    linear-gradient(160deg, #f2e4d2 0%, #ceb8a1 55%, #7e5a4a 100%);
}

/* Cartão de vidro por cima do gradiente. */
.elementor .we2-vidro.we2-vidro {
  background-color: rgba(255, 252, 245, 0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(255,255,255,0.18),
              0 1px 1px rgba(50,35,32,0.04), 0 12px 40px -12px rgba(50,35,32,0.28);
  text-align: left;
  align-items: flex-start;
}
@supports (backdrop-filter: blur(22px)) {
  .elementor .we2-vidro.we2-vidro {
    background-color: rgba(255, 252, 245, 0.74);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }
}
@media (max-width: 767px) {
  .elementor .we2-vidro.we2-vidro { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

/* O Elementor da 10px de padding a TODO container por padrao, pela regra
   .elementor .e-flexbox-base { padding: 10px }. Essa regra tem DUAS classes no
   seletor, igual a ".elementor .we2-xxx", e o arquivo dela carrega DEPOIS deste
   CSS personalizado. Empate de especificidade, quem vem depois ganha: era por
   isso que o reset escrito com uma classe so nunca pegava e todo container
   ficava com 10px. Repetindo a classe o seletor passa a ter tres classes e
   ganha sempre, sem depender de ordem de carregamento.
   MEDIDO em 02/10/2026: antes desta correcao os 27 containers da Home estavam
   todos com 10px. */
.elementor .we2-mural-coluna.we2-mural-coluna, .elementor .we2-mural-fileira.we2-mural-fileira,
.elementor .we2-faixa-logos.we2-faixa-logos, .elementor .we2-faixa-pista.we2-faixa-pista,
.elementor .we2-split.we2-split, .elementor .we2-split-lado.we2-split-lado,
.elementor .we2-split-principal.we2-split-principal,
.elementor .we2-pilha.we2-pilha, .elementor .we2-stat.we2-stat,
.elementor .we2-stat-linha.we2-stat-linha,
.elementor .we2-trilho-cartao.we2-trilho-cartao, .elementor .we2-trilho-cabeca.we2-trilho-cabeca,
.elementor .we2-trilho-texto.we2-trilho-texto, .elementor .we2-servico-corpo.we2-servico-corpo,
.elementor .we2-campo.we2-campo,
.elementor .we2-lista-tiques.we2-lista-tiques, .elementor .we2-hero-centro-col.we2-hero-centro-col,
.elementor .we2-shell.we2-shell, .elementor .we2-shell-meio.we2-shell-meio,
.elementor .we2-cartoes.we2-cartoes, .elementor .we2-veu.we2-veu,
.elementor .we2-isca.we2-isca, .elementor .we2-campos-par.we2-campos-par,
.elementor .we2-aceite.we2-aceite,
.elementor .we2-header.we2-header, .elementor .we2-zona-inicio.we2-zona-inicio,
.elementor .we2-zona-centro.we2-zona-centro, .elementor .we2-zona-fim.we2-zona-fim,
.elementor .we2-nav.we2-nav, .elementor .we2-idioma.we2-idioma,
.elementor .we2-logo-link.we2-logo-link, .elementor .we2-painel-lista.we2-painel-lista,
.elementor .we2-painel-rodape.we2-painel-rodape,
.elementor .we2-rodape-interno.we2-rodape-interno, .elementor .we2-rodape-topo.we2-rodape-topo,
.elementor .we2-rodape-marca.we2-rodape-marca, .elementor .we2-rodape-colunas.we2-rodape-colunas,
.elementor .we2-rodape-coluna.we2-rodape-coluna, .elementor .we2-rodape-base.we2-rodape-base,
.elementor .we2-col-12.we2-col-12, .elementor .we2-col-16.we2-col-16,
.elementor .we2-col-24.we2-col-24, .elementor .we2-col-32.we2-col-32,
.elementor .we2-col-48.we2-col-48, .elementor .we2-col-64.we2-col-64,
.elementor .we2-hero-meta.we2-hero-meta, .elementor .we2-hero-meta-item.we2-hero-meta-item,
.elementor .we2-socio-texto.we2-socio-texto,
.elementor .we2-shell-estreito.we2-shell-estreito { padding: 0; }

/* A barrinha do hamburguer e um e-div-block, que vem com min-width 30px e
   10px de padding de fabrica. Sem zerar, ela sai com 22px de altura. */
.elementor .we2-menu-barra.we2-menu-barra { padding: 0; min-width: 0; }

/* A barra do cabecalho tem altura fixa: o padding de cima e de baixo de
   fabrica so come o espaco interno. */
.elementor .we2-header-barra.we2-header-barra { padding-block: 0; }

/* Mesmo caso da pista de logotipos: um e-flexbox usado como item de outro
   flexbox resolve "width: auto" para a largura do CONTAINER, nao do conteudo.
   Sem max-content o logotipo esticava para 1392px, empurrava as duas pontas
   da barra para fora da tela e o botao quebrava em duas linhas. */
.elementor .we2-logo-link.we2-logo-link,
.elementor .we2-zona-centro.we2-zona-centro,
.elementor .we2-hero-meta-item.we2-hero-meta-item,
.elementor .we2-menu-botao.we2-menu-botao { width: max-content; }
@media (max-width: 767px) {
  /* No celular o valor comprido tem que poder quebrar em duas linhas em vez de
     esticar a fileira e abrir rolagem lateral. */
  .elementor .we2-hero-meta-item.we2-hero-meta-item { width: auto; max-width: 100%; }
}
.elementor .we2-menu-botao.we2-menu-botao { width: 32px; }

/* O botao do cabecalho nao encolhe: dentro de uma fileira flex ele aceitava
   ficar menor que o texto e "Get in touch" quebrava em duas linhas. */
.elementor .we2-header-cta.we2-header-cta { flex: 0 0 auto; white-space: nowrap; }
/* O padding do mural fica na classe global we2-mural, editavel no painel. */

/* A linha acima dos numeros e um fio, nao uma faixa. */
.elementor .we2-regra.we2-regra { height: 1px; min-height: 0; padding: 0; opacity: 0.35; }
/* O rotulo abaixo dos numeros nao e caixa alta no original. */
.elementor .we2-stat-rotulo.we2-stat-rotulo { font-size: 14.4px; letter-spacing: normal; text-transform: none; font-weight: 400; color: var(--Text-2-Inverse); }

.elementor .we2-trilho.we2-trilho { padding: 20px clamp(1.25rem, 5vw, 5rem); scroll-padding-left: clamp(1.25rem, 5vw, 5rem); scroll-snap-type: x proximity; }
.elementor .we2-trilho-cartao.we2-trilho-cartao { scroll-snap-align: start; padding: 0; }

/* Pilula do idioma: contorno arredondado e alinhada a esquerda. */
.elementor .we2-pilula.we2-pilula { display: inline-flex; align-self: flex-start; padding: 8px 18px; border: 1px solid var(--Border-Strong); border-radius: 999px; background: var(--Surface); }


/* ===== FORMULARIO DA ISCA DIGITAL ========================================
   O Elementor ja traz estilo de fabrica para campo, rotulo, caixa de marcar
   e botao de enviar, e esses seletores usam DUAS classes
   (.elementor .e-form-input-base), entao ganhavam das nossas classes, que tem
   uma so. Era isso que deixava o campo quadrado, com 36px de altura e letra de
   12px, e o botao preto sem pilula. Repetir a classe no seletor resolve sem
   !important. As medidas vem do nosso CSS: campo com 14px de canto e 52px de
   altura, rotulo em caixa alta, caixinha 22x22 com 6px de canto, botao em
   pilula de 52px. ======================================================== */

/* Campo de texto */
.elementor .we2-input.we2-input {
  width: 100%;
  height: auto;
  min-height: 52px;
  padding: 14px 16px;
  background-color: var(--Surface);
  color: var(--Text);
  border: 1px solid var(--Border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(50,35,32,0.06);
  font-family: var(--WE2-Sans);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.elementor .we2-input.we2-input::placeholder { color: var(--Text-3); opacity: 0.75; }
.elementor .we2-input.we2-input:focus {
  border-color: var(--Focus-Ring);
  box-shadow: 0 0 0 4px rgba(120, 89, 59, 0.18);
  outline: none;
}

/* Rotulo acima do campo */
.elementor .we2-rotulo.we2-rotulo {
  font-family: var(--WE2-Sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--Text-2);
  cursor: pointer;
}

/* Caixa de marcar do aceite da politica */
.elementor .we2-aceite-caixa.we2-aceite-caixa {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 2px;
  border: 1px solid var(--Border-Strong);
  border-radius: 6px;
  background-color: var(--Surface);
  color: var(--Cream);
  cursor: pointer;
}
.elementor .we2-aceite-caixa.we2-aceite-caixa:checked { background-color: var(--Ink); border-color: var(--Ink); }
.elementor .we2-aceite-caixa.we2-aceite-caixa:focus-visible {
  border-color: var(--Focus-Ring);
  box-shadow: 0 0 0 4px rgba(120, 89, 59, 0.18);
  outline: none;
}

/* Texto do aceite e o link da politica */
.elementor .we2-aceite-texto.we2-aceite-texto {
  font-family: var(--WE2-Sans);
  font-size: 14.4px;
  line-height: 1.5;
  color: var(--Text-2);
  cursor: pointer;
}
.elementor .we2-aceite-texto.we2-aceite-texto a {
  color: var(--Text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.elementor .we2-aceite-texto.we2-aceite-texto a:hover { color: var(--Text-Accent); }

/* Botao de enviar: o padrao do Elementor e preto, quadrado e com padding
   proprio. Aqui ele volta a ser a nossa pilula. */
.elementor .we2-btn.we2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  align-self: flex-start;
  min-height: 52px;
  padding: 12px 32px;
  border-radius: 999px;
  font-family: var(--WE2-Sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 200ms ease-out, background-color 200ms ease-out;
}

/* O tracinho no fim do botao. No nosso site e um elemento de verdade, mas o
   botao do Elementor so aceita texto dentro, nunca outro elemento. Entao aqui
   ele e desenhado pelo ::after, que e a unica forma de manter o mesmo filete
   de 16x2 e o deslize de 4px no hover. */
.elementor .we2-btn.we2-btn::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 2px;
  background-color: currentColor;
  transition: transform 200ms ease-out;
}
.elementor .we2-btn.we2-btn:hover::after { transform: translateX(4px); }
/* Links de texto ("See what is included"): no original nao e um sublinhado
   comum, e um filete de 2px embaixo do texto que encolhe para 45% da esquerda
   para a direita quando o cursor chega. Mesma limitacao do botao: so texto
   dentro, entao o filete e o ::after. */
.elementor .we2-link.we2-link {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  text-decoration: none;
}
.elementor .we2-link.we2-link::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 280ms ease-out;
}
.elementor .we2-link.we2-link:hover::after { transform: scaleX(0.45); }
@media (prefers-reduced-motion: reduce) {
  .elementor .we2-link.we2-link:hover::after { transform: none; }
}

/* ===== ESTE BLOCO PRECISA FICAR NO FIM ==================================
   A regra abaixo tem a mesma especificidade de ".we2-btn.we2-btn", entao so
   ganha dela se vier depois. Se alguem mover este bloco para cima, o botao
   Open the portfolio perde o contorno. ================================= */
.elementor .we2-btn-fantasma.we2-btn-fantasma { border: 1px solid var(--Border-Strong); }

/* O botao do trilho alinha com a PRIMEIRA linha da headline, nao com a
   ultima. Quem faz isso e o align-items: flex-start da we2-trilho-cabeca mais
   o rotulo "Selected work" ter saido de dentro da coluna de texto: se ele
   voltasse para la, o botao subiria para a altura do rotulo.
   O nowrap garante o texto numa linha so. O botao tem ~269px, entao cabe
   folgado mesmo numa tela de 375px. */
.elementor .we2-btn-fim.we2-btn-fim { align-self: flex-start; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .elementor .we2-btn.we2-btn:hover::after { transform: none; }
}

/* ===== CABECALHO E RODAPE ==================================================
   Montados como templates do Theme Builder (posts 188 e 189). O que esta aqui
   e o que o painel do Elementor nao expressa: o sticky, os estados do
   cabecalho (transparente sobre o hero, vidro depois de rolar, menu aberto no
   celular) e o filete embaixo dos itens do menu. ========================== */

/* O prop "top" nao existe no painel, entao o sticky se completa aqui. */
.elementor .we2-header.we2-header {
  top: 0;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  transition: background-color 280ms ease-out, border-color 280ms ease-out;
}

/* O Elementor pinta TODO e-button de azul (#375EFB) e da padding proprio.
   Estes sao links de texto, nao botoes. */
.elementor .we2-nav-link.we2-nav-link,
.elementor .we2-idioma-opcao.we2-idioma-opcao,
.elementor .we2-painel-link.we2-painel-link,
.elementor .we2-rodape-link.we2-rodape-link {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease-out;
}

/* O filete embaixo do item do menu cresce da esquerda quando o cursor chega.
   Mesma limitacao dos outros botoes: so texto dentro, entao e ::after. */
.elementor .we2-nav-link.we2-nav-link::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms ease-out;
}
.elementor .we2-nav-link.we2-nav-link:hover::after { transform: scaleX(1); }

.elementor .we2-rodape-link.we2-rodape-link:hover,
.elementor .we2-idioma-opcao.we2-idioma-opcao:hover { color: var(--Text-Inverse); }

/* "hello@we2marketing.com" e uma palavra so e muito comprida: sem isto a
   coluna Contact nao conseguia encolher e empurrava a coluna Legal para a
   linha de baixo. */
.elementor .we2-rodape-link.we2-rodape-link { overflow-wrap: break-word; }

/* ESTADO SOLIDO, depois de rolar.
   E o unico lugar do site onde o Liquid Glass faz sentido, porque a barra fica
   por cima do conteudo que passa por baixo dela. Em fundo liso viraria um
   cinza sem funcao. Quem nao tem backdrop-filter ve creme solido. */
.elementor .we2-header.is-solid {
  background-color: var(--Cream);
  border-bottom-color: rgba(89, 63, 57, 0.24);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .elementor .we2-header.is-solid {
    background-color: rgba(255, 252, 245, 0.74);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(255,255,255,0.18);
  }
}
.elementor .we2-header.is-solid .we2-nav-link { color: var(--Text); }
.elementor .we2-header.is-solid .we2-logo-claro { display: none; }
.elementor .we2-header.is-solid .we2-logo-escuro { display: block; }
.elementor .we2-header.is-solid .we2-menu-barra { background-color: var(--Ink); }
.elementor .we2-header.is-solid .we2-idioma-opcao { color: var(--Text-2); }
.elementor .we2-header.is-solid .we2-idioma-ativo { color: var(--Text); }
.elementor .we2-header.is-solid .we2-idioma-sep { color: rgba(89, 63, 57, 0.24); }
.elementor .we2-header.is-solid .we2-btn-claro.we2-btn-claro {
  background-color: var(--Ink);
  color: var(--Cream);
}
.elementor .we2-header.is-solid .we2-btn-claro.we2-btn-claro:hover {
  background-color: var(--Cocoa);
}

/* MENU DO CELULAR
   Ate 1024px o menu vira hamburguer e o painel abre em tela cheia sobre o
   preto. Quem abre e fecha e o JS do Custom Code, que so troca a classe. */
@media (max-width: 1024px) {
  /* O menu deitado sai e entra o hamburguer. Precisa de classe repetida porque
     a regra geral .we2-btn.we2-btn define display sem media query e ganharia
     da variante de tablet da classe global. */
  .elementor .we2-nav.we2-nav { display: none; }
  .elementor .we2-header-cta.we2-header-cta { display: none; }

  .elementor .we2-header.is-open { height: 100vh; background-color: var(--Ink); }
  .elementor .we2-header.is-open .we2-painel { display: flex; }
  .elementor .we2-header.is-open .we2-logo-claro { display: block; }
  .elementor .we2-header.is-open .we2-logo-escuro { display: none; }
  .elementor .we2-header.is-open .we2-menu-barra { background-color: var(--Cream); }
  .elementor .we2-header.is-open .we2-idioma-opcao { color: var(--Text-2-Inverse); }
  .elementor .we2-header.is-open .we2-idioma-ativo { color: var(--Text-Inverse); }
  .elementor .we2-header.is-open .we2-idioma-sep { color: var(--Sand); }
  /* O painel empurra o rodape dele para baixo, como no site original. */
  .elementor .we2-painel-rodape { margin-top: auto; }
}

/* O menu do celular nao rola o fundo junto. */
body.we2-menu-aberto { overflow: hidden; }

/* ===== ANIMACOES ========================================================
   REDE DE SEGURANCA: o CSS so esconde alguma coisa se a classe "we2-com-js"
   existir no <html>, e quem poe essa classe e o proprio script. Sem isso uma
   falha de JavaScript deixaria a pagina inteira invisivel, inclusive para o
   robo do Google.
   Curva e duracoes vindas dos nossos tokens: ease-out
   cubic-bezier(0.23, 1, 0.32, 1), 420ms para entrar. ==================== */

/* Blocos que sobem um pouco ao entrar na tela. */
.we2-com-js .elementor .we2-revela {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 420ms cubic-bezier(0.23, 1, 0.32, 1);
}
.we2-com-js .elementor .we2-revela.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Titulos grandes: cada linha e recortada e sobe de baixo, uma depois da
   outra. Quem divide o titulo em linhas e o script; aqui fica so o movimento.
   O padding-bottom com margin-bottom negativa compensa as letras que descem
   (g, p, y), que a janela de overflow cortaria. */
.elementor .we2-titulo-linha {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.elementor .we2-titulo-interior {
  display: block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 620ms cubic-bezier(0.23, 1, 0.32, 1),
              opacity 380ms cubic-bezier(0.23, 1, 0.32, 1);
}
.elementor .we2-titulo-anima.is-in .we2-titulo-interior {
  transform: translateY(0);
  opacity: 1;
}

/* Na home o logotipo do cabecalho so aparece depois que a barra fica solida.
   Antes disso ele estaria repetindo o logotipo grande do hero, a poucos
   centimetros dele. */
.elementor .we2-header.tem-hero .we2-logo-link {
  transition: opacity 280ms cubic-bezier(0.23, 1, 0.32, 1);
}
.elementor .we2-header.tem-hero:not(.is-solid):not(.is-open) .we2-logo-link {
  opacity: 0;
  pointer-events: none;
}

/* Quem pede menos movimento no sistema ve tudo parado, mas visivel. */
@media (prefers-reduced-motion: reduce) {
  .we2-com-js .elementor .we2-revela {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .elementor .we2-titulo-interior {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ===== AMPLIAR FOTO ======================================================
   A pessoa clica numa foto e ela abre grande por cima da pagina.
   Entra em toda imagem com formato de midia (4:5, 16:9, 1:1, 9:16).
   NAO entra no mural do hero nem nos logotipos: ali a foto e cenario, nao
   obra, e o logotipo e marca de cliente. ================================ */

.elementor .we2-midia-4-5,
.elementor .we2-midia-16-9,
.elementor .we2-midia-1-1,
.elementor .we2-midia-9-16 { cursor: zoom-in; }
.elementor .we2-midia-4-5:focus-visible,
.elementor .we2-midia-16-9:focus-visible,
.elementor .we2-midia-1-1:focus-visible,
.elementor .we2-midia-9-16:focus-visible {
  outline: 3px solid var(--Focus-Ring);
  outline-offset: 3px;
}

/* Com a foto aberta, a pagina atras para de rolar. */
.we2-com-foto, .we2-com-foto body { overflow: hidden; }

.we2-lightbox {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background-color: rgba(25, 17, 16, 0.94);
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.23, 1, 0.32, 1);
}
.we2-lightbox[hidden] { display: none; }
.we2-lightbox.is-open { opacity: 1; }

.we2-lightbox__figura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: min(92vw, 64rem);
  margin: 0;
  opacity: 0;
  transform: scale(0.96) translateY(0.5rem);
  transition: transform 420ms cubic-bezier(0.23, 1, 0.32, 1),
              opacity 280ms cubic-bezier(0.23, 1, 0.32, 1);
}
.we2-lightbox.is-open .we2-lightbox__figura { opacity: 1; transform: scale(1) translateY(0); }

.we2-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55);
}

.we2-lightbox__fechar,
.we2-lightbox__seta {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 252, 245, 0.28);
  border-radius: 999px;
  background-color: rgba(255, 252, 245, 0.10);
  color: var(--Text-Inverse);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.we2-lightbox__icone { width: 1.25rem; height: 1.25rem; }
.we2-lightbox__fechar { top: 24px; right: 24px; }
.we2-lightbox__seta { top: 50%; margin-top: -1.375rem; }
.we2-lightbox__seta--antes { left: 24px; }
.we2-lightbox__seta--depois { right: 24px; }
.we2-lightbox__seta[hidden] { display: none; }

@media (hover: hover) {
  .we2-lightbox__fechar:hover,
  .we2-lightbox__seta:hover {
    background-color: rgba(255, 252, 245, 0.20);
    transform: scale(1.06);
  }
}
.we2-lightbox__fechar:active,
.we2-lightbox__seta:active { transform: scale(0.96); }
.we2-lightbox__fechar:focus-visible,
.we2-lightbox__seta:focus-visible { outline: 3px solid var(--Focus-Ring); outline-offset: 3px; }

/* No celular as setas descem para os cantos de baixo, longe do polegar que
   segura o aparelho e longe da foto. */
@media (max-width: 640px) {
  .we2-lightbox { padding: 24px 16px 32px; }
  .we2-lightbox__img { max-height: 66vh; }
  .we2-lightbox__seta { top: auto; bottom: 24px; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .we2-lightbox__figura { transform: none; transition: opacity 280ms ease-out; }
  .we2-lightbox.is-open .we2-lightbox__figura { transform: none; }
  .we2-lightbox__fechar:hover,
  .we2-lightbox__seta:hover { transform: none; }
}

/* Botao de contorno sobre fundo claro. Precisa vir depois do .we2-btn.we2-btn. */
.elementor .we2-btn-fantasma-claro.we2-btn-fantasma-claro {
  background-color: transparent;
  color: var(--Text);
  border: 1px solid var(--Border-Strong);
}
.elementor .we2-btn-fantasma-claro.we2-btn-fantasma-claro:hover {
  background-color: var(--Ink);
  color: var(--Cream);
  border-color: var(--Ink);
}

/* ===== BLOG ==============================================================
   O corpo do artigo vem do editor do WordPress, entao e HTML comum: h2, h3,
   p, ul. Nao da para por classe global em cada um, por isso aqui se estiliza
   por tag, mas sempre DENTRO de .we2-artigo, nunca solto no site. ======== */

.elementor .we2-artigo { width: 100%; }
.elementor .we2-artigo > div { width: 100%; }

.elementor .we2-artigo h2 {
  font-family: var(--WE2-Sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--Text);
  margin: 48px 0 12px;
}
.elementor .we2-artigo h3 {
  font-family: var(--WE2-Sans);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--Text);
  margin: 36px 0 10px;
}
.elementor .we2-artigo p {
  font-family: var(--WE2-Sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--Text-2);
  margin: 0 0 20px;
}
.elementor .we2-artigo ul { list-style: none; margin: 0 0 24px; padding: 0; }
.elementor .we2-artigo li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-family: var(--WE2-Sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--Text-2);
}
/* Mesmo quadradinho dourado da lista de topicos do resto do site. */
.elementor .we2-artigo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  background: var(--Sand);
}
.elementor .we2-artigo a {
  color: var(--Text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.elementor .we2-artigo h2:first-child,
.elementor .we2-artigo h3:first-child { margin-top: 0; }

@media (max-width: 767px) {
  .elementor .we2-artigo h2 { font-size: 23px; margin-top: 36px; }
  .elementor .we2-artigo h3 { font-size: 19px; }
  .elementor .we2-artigo p,
  .elementor .we2-artigo li { font-size: 17px; }
}

/* ----- lista de artigos -----
   O widget de posts do Elementor tem marcacao propria (.elementor-post...).
   Como ele nao aceita as nossas classes globais, a pintura e por aqui, sempre
   dentro de .we2-lista-posts. */
.elementor .we2-lista-posts .elementor-post {
  background-color: var(--Surface);
  border: 1px solid var(--Border);
  border-radius: 28px;
  overflow: hidden;
  padding: 0 0 24px;
}
.elementor .we2-lista-posts .elementor-post__thumbnail__link { margin-bottom: 20px; }
.elementor .we2-lista-posts .elementor-post__text { padding: 0 24px; }
.elementor .we2-lista-posts .elementor-post__title {
  font-family: var(--WE2-Sans);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 10px;
}
.elementor .we2-lista-posts .elementor-post__title a { color: var(--Text); text-decoration: none; }
.elementor .we2-lista-posts .elementor-post__excerpt p {
  font-family: var(--WE2-Sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--Text-2);
}
.elementor .we2-lista-posts .elementor-post__meta-data {
  font-family: var(--WE2-Sans);
  font-size: 11.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--Text-3);
  margin-bottom: 10px;
}
/* O "Read the article" segue o mesmo filete dos outros links do site. */
.elementor .we2-lista-posts .elementor-post__read-more {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--WE2-Sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--Text);
  text-decoration: none;
}
.elementor .we2-lista-posts .elementor-post__read-more::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1);
}
.elementor .we2-lista-posts .elementor-post__read-more:hover::after { transform: scaleX(0.45); }
.elementor .we2-lista-posts img { border-radius: 0; display: block; width: 100%; height: auto; }


/* ===== CORRECOES DE 09/10/2026 ===========================================
   Revisao da Ivana comparando com o site original. ======================= */

/* O cabecalho sumia assim que a pagina comecava a rolar. O Elementor embrulha
   o template do Theme Builder num <header class="elementor-location-header">
   que fica com 1px de altura, porque a nossa we2-header tem margin-block-end
   negativa. Um elemento sticky so gruda DENTRO da caixa do pai: com 1px de
   caixa, ele rolava embora no primeiro pixel. Quem precisa ser sticky e o
   embrulho, nao o nosso container. */
.elementor-location-header { position: sticky; top: 0; z-index: 20; }

/* EN / PT ficava colado no logotipo. O we2-idioma e um e-flexbox usado como
   item de outro flexbox, e nesse caso width:auto resolve para a largura do
   CONTAINER: 420px em vez de 60px, jogando o bloco para a esquerda da zona.
   E a mesma armadilha ja vista na pista de logotipos e na zona central. */
.elementor .we2-idioma.we2-idioma { width: max-content; flex: 0 0 auto; }

/* Pilulas dos servicos: no original elas escurecem quando o cursor chega. */
.elementor .we2-pilula.we2-pilula {
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
              color 160ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .elementor .we2-pilula.we2-pilula:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(50, 35, 32, 0.04), 0 10px 24px -10px rgba(50, 35, 32, 0.20);
    background: var(--Ink);
    border-color: var(--Ink);
    color: var(--Cream);
  }
  /* Na secao escura a pilula e translucida e vira creme solido no hover. */
  .elementor .we2-pilula-escura.we2-pilula-escura:hover {
    background: var(--Cream);
    border-color: var(--Cream);
    color: var(--Ink);
  }
}

/* Cartao dourado do About ("How WE2 runs"). O fundo vem da classe global,
   editavel no painel; aqui ficam so as cores dos filhos. */
/* A we2-card tambem define background, e a ordem do arquivo de classes
   globais nao e garantida. Classe repetida para nao depender de ordem. */
.elementor .we2-cartao-dourado.we2-cartao-dourado { background: var(--Gold); border-color: var(--Gold); }
.elementor .we2-cartao-dourado .we2-micro { color: var(--Espresso); }
.elementor .we2-cartao-dourado .we2-card-titulo { color: var(--Ink); }
.elementor .we2-cartao-dourado .we2-corpo { color: var(--Espresso); }
.elementor .we2-cartao-dourado .we2-lista-tiques > p::before { background: var(--Ink); }

/* Ficha do socio: a foto nao estica junto com o cartao. */
.elementor .we2-socio-foto.we2-socio-foto { align-self: flex-start; }

.elementor .we2-pilula-escura.we2-pilula-escura { box-shadow: none; }

/* ===== VIDEOS DO YOUTUBE NO PORTFOLIO (09/10/2026) =======================
   Os 8 espacos 9:16 do topico 02 agora sao widgets e-youtube do Elementor,
   apontando para os Shorts do canal dela. O player so e criado quando o video
   chega perto da tela (lazy load) e usa youtube-nocookie. ================= */

/* O e-youtube nasce com aspect-ratio 16/9 no estilo de fabrica, que tem a
   mesma especificidade da nossa classe global. Empate de especificidade:
   ganha quem vier depois no arquivo, e isso nao e garantido. Classe repetida
   para o 9/16 valer sempre. */
.elementor .we2-espaco-video.we2-espaco-video {
  aspect-ratio: 9 / 16;
  overflow: hidden;
}

/* O YouTube troca a div interna por um iframe com largura e altura proprias
   (640x390). Sem isto o video sai pequeno dentro da caixa. */
.elementor .we2-espaco-video iframe,
.elementor .we2-espaco-video > div {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== BLOG EM LARGURA CHEIA (09/10/2026) ================================
   As paginas comuns ja saem de ponta a ponta porque cada uma leva a meta do
   Astra "ast-site-content-layout = full-width-container". A lista do blog e o
   artigo NAO sao paginas: sao arquivo e single, desenhados pelo Theme Builder.
   O Astra nao le meta de pagina ali e embrulha tudo num .ast-container de
   1240px, o que deixava a pagina espremida no meio com as laterais vazias. */
body.blog .ast-container,
body.archive .ast-container,
body.single .ast-container,
body.search .ast-container,
body.error404 .ast-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ===== O PONTINHO DOURADO DOS ROTULOS ===================================
   No site original todo .eyebrow comeca com um ponto dourado de 8px, que e um
   elemento de verdade (<span class="eyebrow__dot">). O e-paragraph do Elementor
   so aceita texto dentro, nunca outro elemento, entao aqui o ponto vira
   ::before. E a segunda excecao a regra "nada de ::after/::before visivel",
   pela mesma razao da primeira (o traco no fim do botao): nao ha alternativa.
   NAO vale para we2-micro, que no original nao tem ponto. */
.elementor .we2-olho.we2-olho {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.elementor .we2-olho.we2-olho::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--Gold);
}

/* ===== ARTIGO DO BLOG (09/10/2026) ======================================
   Pedidos dela: capa do artigo antes do titulo, titulo menor e a secao de
   artigos relacionados que existe no blog-post.html original. ============ */

/* A capa e o widget classico do Theme Builder, porque o e-image atomico nao
   resolve a tag dinamica da imagem destaque: sai um <img> sem src. Entao o
   formato 16:10 vem daqui, e nao de uma classe global. */
.elementor .we2-capa-artigo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 20px;
}

/* Enquanto houver um artigo publicado so, a consulta de relacionados volta
   vazia e o widget do Elementor nao imprime nada. Sem isto sobraria o titulo
   "Other articles you may find useful" com um buraco embaixo.
   A secao reaparece sozinha quando o segundo artigo for publicado. */
.elementor .we2-secao:has(.we2-relacionados):not(:has(.elementor-post)) {
  display: none;
}

/* ===== ANCORAS E O CABECALHO FIXO (09/10/2026) ==========================
   Os links que apontam para um pedaco da pagina (/services/#servico-02) caem
   com o alvo embaixo da barra fixa de 76px. O scroll-margin-top reserva esse
   espaco, entao o titulo do topico fica visivel ao chegar. ============== */
[id] { scroll-margin-top: 96px; }/* End custom CSS */