.elementor-1638 .elementor-element.elementor-element-0c29964{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1638 .elementor-element.elementor-element-061a025{width:100%;max-width:100%;}.elementor-1638 .elementor-element.elementor-element-061a025 > .elementor-widget-container{padding:0px 0px 0px 0px;}/* Start custom CSS for container, class: .elementor-element-0c29964 */#ds-site-wrapper .ds-pagehero h1.ds-title {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
}


/* ==========================================================================
   1. OS QUATRO CAMINHOS  (a "animação" pedida na copy)

   PROVOCAR · DIRECIONAR · ESTRUTURAR · DESENVOLVER

   A copy trata os quatro como uma sequência, não como um cardápio solto —
   uma coisa leva à outra. Por isso eles são desenhados como um PERCURSO:
   uma linha horizontal atravessa os quatro números e se preenche da
   esquerda para a direita quando o bloco entra na tela.

   O preenchimento é feito com scaleX sobre um pseudo-elemento, e não
   animando `width`: scale roda na GPU e não força o navegador a recalcular
   o layout a cada quadro.

   Quem dispara é a classe .is-visible que o JS global já põe em qualquer
   .ds-reveal — nenhum código novo foi preciso.
   ========================================================================== */

/* A seção inteira é centrada. O percurso já nasce centrado — os quatro
   passos dividem a largura em colunas iguais e cada um centra o próprio
   conteúdo —, então um cabeçalho encostado à esquerda deixava a seção com
   dois eixos brigando: o título puxando para um lado e a linha dos números
   ancorada no meio.

   Mesmo tratamento que a síntese, os depoimentos e a chamada final já têm.
   A seção das quatro soluções é a única que continua assimétrica, e ali é
   de propósito: lá o texto divide espaço com uma foto ao lado. */
#ds-site-wrapper .ds-paths { text-align: center; }

#ds-site-wrapper .ds-paths .ds-eyebrow { justify-content: center; }

/* O .ds-lead nasce com max-width em ch e alinhado à esquerda; centrar o
   texto não centra a CAIXA dele, que continuaria encostada na margem. */
#ds-site-wrapper .ds-paths .ds-lead {
  margin-inline: auto;
  max-width: 62ch;
}

#ds-site-wrapper .ds-path {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

@media (min-width: 860px) {
  #ds-site-wrapper .ds-path { grid-template-columns: repeat(4, 1fr); gap: 0; }
}

/* --- A linha do percurso -------------------------------------------------
   Só existe no desktop, onde os quatro ficam lado a lado. No celular eles
   empilham e uma linha horizontal não teria o que ligar.

   Ela nasce na metade do primeiro número e morre na metade do último —
   daí o `inset` de 12.5% (metade de uma coluna de 25%) nas duas pontas.
   Passar de ponta a ponta faria a linha sobrar no vazio.
   ----------------------------------------------------------------------- */
@media (min-width: 860px) {
  #ds-site-wrapper .ds-path::before,
  #ds-site-wrapper .ds-path::after {
    content: '';
    position: absolute;
    top: 27px;                   /* na altura do meio do número */
    left: 12.5%;
    right: 12.5%;
    height: 2px;
  }

  /* trilho apagado */
  #ds-site-wrapper .ds-path::before { background: var(--ds-line); }

  /* o preenchimento dourado, que corre da esquerda para a direita */
  #ds-site-wrapper .ds-path::after {
    background: var(--ds-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.4s cubic-bezier(.2,.7,.3,1) .2s;
  }

  #ds-site-wrapper .ds-path.is-visible::after { transform: scaleX(1); }
}

/* Sem JS a linha ficaria encolhida para sempre. A regra abaixo devolve o
   preenchimento quando o script não roda — mesma lógica do resto da
   página: a animação some, o desenho fica. */
#ds-site-wrapper:not(.ds-js) .ds-path::after { transform: scaleX(1); }

#ds-site-wrapper .ds-path__step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-inline: .6rem;
}

/* O número. É um disco opaco, e o opaco importa: ele é o que "fura" a
   linha do percurso, dando a impressão de que ela passa por trás. */
#ds-site-wrapper .ds-path__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  border: 1px solid var(--ds-accent-line);
  background: var(--ds-bg);
  font-family: var(--ds-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ds-accent);
  transition: border-color .4s ease, background-color .4s ease, transform .4s ease;
}

/* No celular a faixa clara da seção passa por trás; o disco precisa
   acompanhar, senão aparece um buraco preto no meio dela. */
@media (max-width: 859px) {
  #ds-site-wrapper .ds-path__num { background: var(--ds-bg-soft); }
}

#ds-site-wrapper .ds-path__step:hover .ds-path__num {
  border-color: var(--ds-accent);
  background: var(--ds-accent-dim);
  transform: translateY(-4px);
}

#ds-site-wrapper .ds-path__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ds-text);
  margin-bottom: .45rem;
}

#ds-site-wrapper .ds-path__name {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ds-muted);
}

/* O passo inteiro é um link para o bloco detalhado, lá embaixo. */
#ds-site-wrapper a.ds-path__step:hover .ds-path__label { color: var(--ds-accent); }


/* ==========================================================================
   2. AS QUATRO SOLUÇÕES

   Foto de um lado, texto do outro, alternando a cada bloco. A alternância
   não é enfeite: quatro blocos idênticos empilhados viram uma lista que o
   olho pula. Trocar o lado obriga a recomeçar a leitura em cada um.

   No celular a alternância some (não há dois lados) e a foto vai sempre
   para cima — inverter lá só embaralharia a ordem de leitura.
   ========================================================================== */

#ds-site-wrapper .ds-sol__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
}

#ds-site-wrapper .ds-sol__item + .ds-sol__item {
  margin-top: clamp(3.5rem, 8vw, 6.5rem);
  padding-top: clamp(3.5rem, 8vw, 6.5rem);
  border-top: 1px solid var(--ds-line);
}

@media (min-width: 900px) {
  #ds-site-wrapper .ds-sol__item { grid-template-columns: 1fr 1fr; }

  /* O flip é feito com `order`, não invertendo o HTML: assim a ordem em
     que as coisas são LIDAS por um leitor de tela continua sendo sempre
     título → texto → foto, em todos os quatro. */
  #ds-site-wrapper .ds-sol__item--flip .ds-sol__media { order: 2; }
}

#ds-site-wrapper .ds-sol__media {
  position: relative;
  border-radius: var(--ds-radius);
  overflow: hidden;
  border: 1px solid var(--ds-line);
  background: var(--ds-bg-card);
  aspect-ratio: 4 / 3;
}

#ds-site-wrapper .ds-sol__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.7,.3,1);
}

#ds-site-wrapper .ds-sol__item:hover .ds-sol__media img { transform: scale(1.05); }

/* Etiqueta com o número da etapa, sobreposta ao canto da foto. Amarra o
   bloco ao passo correspondente lá em cima, sem precisar repetir texto. */
#ds-site-wrapper .ds-sol__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: 100px;
  background: rgba(8, 7, 7, .82);
  border: 1px solid var(--ds-accent-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ds-accent);
}

/* O título de cada solução tem duas partes: o NOME (Palestras) e a
   PROMESSA (para provocar movimento). O nome sai em ouro e a promessa em
   branco — o inverso do .ds-title da home, onde o destaque é a 2ª linha.
   Aqui o que precisa ser encontrado de relance é o nome do serviço. */
#ds-site-wrapper .ds-sol__title {
  font-family: var(--ds-font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: uppercase;
}

#ds-site-wrapper .ds-sol__title span {
  display: block;
  color: var(--ds-accent);
  margin-bottom: .12em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #ds-site-wrapper .ds-sol__title span {
    background-image: var(--ds-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

#ds-site-wrapper .ds-sol__body .ds-lead { margin-top: 1.3rem; }


/* ==========================================================================
   3. SÍNTESE — "Palestra desperta. Mentoria direciona."

   As quatro linhas da copy são um resumo do percurso inteiro, e ganham
   tratamento de lista escandida: uma por linha, verbo em ouro, separadas
   por um filete. Lidas em bloco corrido perderiam a cadência que a copy
   claramente quis.
   ========================================================================== */

#ds-site-wrapper .ds-synth { text-align: center; }

#ds-site-wrapper .ds-synth .ds-eyebrow { justify-content: center; }

#ds-site-wrapper .ds-synth__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 46rem;
  margin: clamp(2.2rem, 5vw, 3.2rem) auto 0;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  overflow: hidden;
  background: var(--ds-bg-card);
}

#ds-site-wrapper .ds-synth__line {
  padding: 1.15rem 1.4rem;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.45;
  transition: background-color .35s ease;
}

#ds-site-wrapper .ds-synth__line + .ds-synth__line { border-top: 1px solid var(--ds-line); }

#ds-site-wrapper .ds-synth__line:hover { background: #171412; }

/* O sujeito de cada frase — Palestra, Mentoria, Planejamento, Treinamento. */
#ds-site-wrapper .ds-synth__line b {
  font-family: var(--ds-font-display);
  font-weight: 700;
  color: var(--ds-accent);
  letter-spacing: .01em;
}

/* A frase-manifesto: PROVOCAR. DIRECIONAR. ESTRUTURAR. DESENVOLVER. */
#ds-site-wrapper .ds-synth__motto {
  margin-top: clamp(2.2rem, 5vw, 3rem);
  font-family: var(--ds-font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}

#ds-site-wrapper .ds-synth .ds-lead {
  margin-inline: auto;
  margin-top: 1.5rem;
  max-width: 62ch;
}


/* ==========================================================================
   4. DEPOIMENTOS — "O palco termina. O impacto continua."

   O miolo desta seção é um SHORTCODE do Elementor
   ([elementor-template id="3268"]), um carrossel montado por fora. Não há
   CSS de carrossel aqui de propósito: ele traz o próprio.

   O que existe abaixo é só a moldura — o espaço que o shortcode ocupa e o
   respiro em volta. Regras nossas mexendo por dentro dele seriam uma
   surpresa desagradável no dia em que o template mudar.
   ========================================================================== */

#ds-site-wrapper .ds-testi { text-align: center; }

#ds-site-wrapper .ds-testi .ds-eyebrow { justify-content: center; }

#ds-site-wrapper .ds-testi .ds-title { margin-bottom: 1.4rem; }

#ds-site-wrapper .ds-testi .ds-lead {
  margin-inline: auto;
  max-width: 60ch;
}

/* A caixa do shortcode. `min-height` evita que a página dê um pulo entre o
   carregamento do HTML e o do carrossel; o valor é uma estimativa
   folgada — se o carrossel real for mais alto ou mais baixo, ajuste aqui. */
#ds-site-wrapper .ds-testi__embed {
  margin-top: clamp(2.5rem, 5vw, 3.8rem);
  min-height: 220px;
  text-align: left;              /* devolve o alinhamento: a seção é centrada, o carrossel não deve ser */
}


/* ==========================================================================
   5. FAIXA DE CHAMADA FINAL

   A copy fecha com duas perguntas em vez de um título. Elas ficam maiores
   que um .ds-lead e menores que um .ds-title: são a transição para o
   botão, não um novo assunto.
   ========================================================================== */

#ds-site-wrapper .ds-close {
  text-align: center;
}

#ds-site-wrapper .ds-close__ask {
  font-family: var(--ds-font-display);
  font-size: clamp(1.3rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}

#ds-site-wrapper .ds-close__ask span {
  display: block;
  color: var(--ds-accent);
  margin-top: .35em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #ds-site-wrapper .ds-close__ask span {
    background-image: var(--ds-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

#ds-site-wrapper .ds-close .ds-btn-row { justify-content: center; }/* End custom CSS */