.elementor-3285 .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-3285 .elementor-element.elementor-element-061a025{width:100%;max-width:100%;}.elementor-3285 .elementor-element.elementor-element-061a025 > .elementor-widget-container{padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-061a025 */#ds-site-wrapper .ds-video {
  position: relative;
  border-radius: var(--ds-radius);
  overflow: hidden;
  border: 1px solid var(--ds-line);
  background: var(--ds-bg-card);
  aspect-ratio: 16 / 9;
}

/* O iframe, depois que o JS o cria, ocupa a moldura inteira. */
#ds-site-wrapper .ds-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* A capa + o botão. É um <button> que preenche toda a moldura, então o
   alvo de clique é o vídeo inteiro, e não só o triângulo. */
#ds-site-wrapper .ds-video__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
  cursor: pointer;
  border: 0;
  background: none;
}

#ds-site-wrapper .ds-video__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.3,1), filter .4s ease;
  /* A capa entra levemente escurecida: o botão de play precisa vencer a
     imagem, e capa de YouTube costuma ter área clara no meio. */
  filter: brightness(.72);
}

#ds-site-wrapper .ds-video__cover:hover img,
#ds-site-wrapper .ds-video__cover:focus-visible img {
  transform: scale(1.04);
  filter: brightness(.6);
}

/* O triângulo. Um losango girado seria mais leve, mas um triângulo feito
   com borda é o desenho que todo mundo reconhece como "play". */
#ds-site-wrapper .ds-video__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 7vw, 78px);
  height: clamp(56px, 7vw, 78px);
  border-radius: 50%;
  background: var(--ds-gold);
  box-shadow: 0 10px 34px -8px rgba(0,0,0,.75);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
  pointer-events: none;         /* quem recebe o clique é o botão inteiro */
}

#ds-site-wrapper .ds-video__cover:hover .ds-video__icon,
#ds-site-wrapper .ds-video__cover:focus-visible .ds-video__icon {
  transform: translate(-50%, -50%) scale(1.09);
  box-shadow: 0 14px 42px -8px rgba(217,164,65,.55);
}

#ds-site-wrapper .ds-video__icon::before {
  content: '';
  /* Triângulo por borda. O deslocamento de 3px compensa o peso visual:
     um triângulo centrado pela caixa parece torto para a esquerda. */
  margin-left: 4px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #080707;
}

/* --- O link que existe quando o JS não roda ------------------------------
   No HTML, cada bloco de vídeo nasce com um <a> para o YouTube. O JS o
   remove e põe o botão de play no lugar.

   Ele NÃO é decoração: é o que garante que quem está sem script consiga
   assistir, só que na outra aba. Por isso ele preenche a moldura inteira e
   se parece com um botão — não pode virar um textinho perdido no canto de
   uma caixa preta.
   ----------------------------------------------------------------------- */
#ds-site-wrapper .ds-video__fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-accent);
  background: var(--ds-bg-card);
  transition: background-color .3s ease, color .3s ease;
}

#ds-site-wrapper .ds-video__fallback:hover {
  background: #191614;
  color: var(--ds-accent-light);
}

/* A legenda do vídeo, sobreposta ao pé da capa. Some quando o vídeo toca —
   o JS troca o conteúdo da moldura inteira. */
#ds-site-wrapper .ds-video__label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 2.6rem 1.3rem 1.15rem;
  text-align: left;
  background: linear-gradient(to top, rgba(8,7,7,.92), rgba(8,7,7,0));
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ds-text);
  pointer-events: none;
}


/* ==========================================================================
   2. GRADE DE VÍDEOS

   Um vídeo grande em cima e os secundários embaixo. A hierarquia é
   deliberada: a copy manda um vídeo específico ("cortes fortes") e o resto
   é complemento — dar o mesmo tamanho a todos jogaria fora essa escolha.
   ========================================================================== */

#ds-site-wrapper .ds-vmain { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* --- SHORTS: moldura vertical -------------------------------------------
   Short é vídeo em pé (9/16). Numa moldura 16/9 ele apareceria com duas
   tarjas pretas enormes nas laterais — que é justamente como o YouTube
   entrega a miniatura dele: um quadro 16/9 com o conteúdo vertical
   espremido no meio.

   Com a moldura em 9/16, o `object-fit: cover` corta as laterais dessa
   miniatura e mostra só a faixa central — ou seja, o corte REMOVE as
   tarjas em vez de criar. É o caso raro em que recortar melhora.
   ----------------------------------------------------------------------- */
#ds-site-wrapper .ds-video--short { aspect-ratio: 9 / 16; }

#ds-site-wrapper .ds-vgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 1.6vw, 1.1rem);
  margin-top: clamp(1rem, 2.5vw, 1.6rem);
  /* Teto de largura: três peças verticais esticadas nos 1220px do
     container ficariam com ~390px de largura e ~690px de ALTURA cada — uma
     parede de vídeo. Em 52rem elas ficam em ~265x470, que é o tamanho em
     que um Short é visto no telefone. */
  max-width: 52rem;
  margin-inline: auto;
}

/* --- Celular: faixa que desliza ------------------------------------------
   Empilhados, três vídeos verticais dariam ~1500px de rolagem só nesta
   seção. Em três colunas numa tela de 375px, cada um ficaria com ~100px de
   largura e o botão de play tomaria metade do quadro.

   A saída é a mesma que o próprio YouTube usa: uma faixa que corre para o
   lado, com encaixe. Cada peça ocupa 62% da largura, então a segunda
   aparece pela metade — é o que avisa que há mais para o lado, sem
   precisar de seta nem de texto.
   ----------------------------------------------------------------------- */
@media (max-width: 699px) {
  #ds-site-wrapper .ds-vgrid {
    display: flex;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox */
    padding-bottom: .4rem;
  }

  #ds-site-wrapper .ds-vgrid::-webkit-scrollbar { display: none; }

  #ds-site-wrapper .ds-vgrid .ds-video {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
}

/* Nos secundários o botão de play encolhe, senão ele domina um quadro que
   é um terço do tamanho do principal. */
#ds-site-wrapper .ds-vgrid .ds-video__icon {
  width: clamp(44px, 5vw, 56px);
  height: clamp(44px, 5vw, 56px);
}

#ds-site-wrapper .ds-vgrid .ds-video__icon::before {
  border-width: 8px 0 8px 13px;
  margin-left: 3px;
}

#ds-site-wrapper .ds-vgrid .ds-video__label {
  padding: 2rem 1rem .9rem;
  font-size: .76rem;
}


/* ==========================================================================
   3. IMPRENSA — AS CAPAS

   AS CAPAS SÃO O ASSUNTO DESTA SEÇÃO. Elas provam a publicação de um jeito
   que texto nenhum prova: quem bate o olho reconhece as marcas dos
   veículos antes de ler qualquer coisa.

   O layout segue o desenho aprovado — uma peça larga em destaque e três
   menores ao lado — com duas mudanças:

   1. AS CAPAS SÃO CLICÁVEIS. Cada uma é um <a> para a matéria daquele
      veículo. No desenho original elas eram só imagem, e uma capa de
      revista sem link é uma promessa que não cumpre: quem vê quer ler.

   2. A MANCHETE APARECE UMA VEZ, acima da grade, e não dentro de cada
      capa. As quatro matérias são o MESMO release, com o MESMO título —
      repeti-lo quatro vezes faz parecer quatro conteúdos diferentes, e a
      repetição é descoberta no terceiro card. Em cima uma vez, ela vira o
      assunto; nas capas, o que identifica é a marca do veículo.

   PROPORÇÕES: a peça larga é um spread de revista (16/10) e as três são
   páginas em retrato (3/4). Elas alinham pelo TOPO, não pela base — foi
   assim no desenho, e é assim que banca de jornal se parece.
   ========================================================================== */

#ds-site-wrapper .ds-press {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* --- A manchete, uma vez -------------------------------------------------- */

#ds-site-wrapper .ds-press__lead {
  max-width: 60rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

#ds-site-wrapper .ds-press__kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .85rem;
  border-radius: 100px;
  border: 1px solid var(--ds-accent-line);
  background: var(--ds-accent-dim);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ds-accent);
  margin-bottom: 1.2rem;
}

/* Sai em Playfair como os títulos, mas em caixa NORMAL e não em caps: é uma
   citação de imprensa, e manchete de jornal não é caixa alta. Ler como
   manchete é parte do que ela comunica. */
#ds-site-wrapper .ds-press__title {
  font-family: var(--ds-font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

#ds-site-wrapper .ds-press__meta {
  margin-top: 1rem;
  font-size: .78rem;
  color: var(--ds-muted);
}

/* --- A grade das capas ---------------------------------------------------
   Celular: uma coluna.
   A partir de 620px: duas, com a peça larga ocupando as duas.
   A partir de 1000px: as quatro em linha, a larga valendo por ~1.8.
   ----------------------------------------------------------------------- */

#ds-site-wrapper .ds-covers {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  align-items: start;          /* alinham pelo topo: alturas diferentes é o desenho */
}

@media (min-width: 620px) {
  #ds-site-wrapper .ds-covers { grid-template-columns: repeat(2, 1fr); }
  #ds-site-wrapper .ds-cover--wide { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  #ds-site-wrapper .ds-covers { grid-template-columns: 1.8fr 1fr 1fr 1fr; }
  #ds-site-wrapper .ds-cover--wide { grid-column: auto; }
}

/* --- Cada capa ----------------------------------------------------------- */

#ds-site-wrapper .ds-cover {
  position: relative;
  display: block;
  border-radius: var(--ds-radius);
  overflow: hidden;
  border: 1px solid var(--ds-line);
  background: var(--ds-bg-card);
  transition: transform .4s cubic-bezier(.2,.7,.3,1),
              border-color .4s ease, box-shadow .4s ease;
}

#ds-site-wrapper .ds-cover:hover {
  transform: translateY(-6px);
  border-color: var(--ds-accent-line);
  box-shadow: 0 22px 50px -22px rgba(0,0,0,.9);
}

/* --- REGRA DE OURO DESTAS CAPAS: nenhuma é cortada ----------------------
   Mesmo princípio do hero da home, e pelo mesmo motivo — só que aqui é
   ainda mais rígido.

   CAPA É DOCUMENTO. O que ela prova está nas bordas: o logo do veículo no
   alto e a manchete embaixo. Qualquer corte come exatamente a evidência.

   E as quatro têm proporções DIFERENTES:

     BusinessWeek ......... 1537 x 1023 .. 3/2   (revista aberta)
     Poder & Negócios ..... 1024 x 1536 .. 2/3
     Gazeta de Brasília ... 1024 x 1536 .. 2/3
     IstoÉ Negócios ....... 1086 x 1448 .. 3/4

   As três em retrato nem entre si batem. Um `aspect-ratio` único com
   `object-fit: cover` cortaria a Poder e a Gazeta em ~11% da altura, bem
   em cima da manchete.

   Por isso NÃO HÁ aspect-ratio nem cover aqui: cada capa entra com
   width:100% e height:auto, e a moldura assume a proporção real do
   arquivo. Alinhadas pelo topo, as alturas ficam desiguais — que é como
   uma banca de jornal se parece, e era assim no desenho aprovado.

   O que reserva o espaço antes de a imagem baixar (e evita o pulo de
   layout) são os atributos width e height nas próprias tags <img>, no
   HTML. SE TROCAR UMA CAPA, atualize os dois números lá.

   CAPA NOVA NÃO PRECISA DE PROPORÇÃO NENHUMA EM ESPECIAL. É a vantagem de
   não recortar: entra do jeito que for.
   ----------------------------------------------------------------------- */
#ds-site-wrapper .ds-cover__frame {
  position: relative;
  overflow: hidden;
  background: var(--ds-bg);
  line-height: 0;              /* mata a folga que a linha de texto deixaria sob a imagem */
}

#ds-site-wrapper .ds-cover__frame img {
  width: 100%;
  height: auto;                /* a altura segue a imagem: sem corte, nunca */
  display: block;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}

#ds-site-wrapper .ds-cover:hover .ds-cover__frame img { transform: scale(1.04); }

/* --- O rodapé de cada capa -----------------------------------------------
   Só o nome do veículo e o "ler". A manchete NÃO se repete aqui — ela está
   uma vez, acima da grade.

   O min-height NÃO É ENFEITE, e é a razão de os quatro cards terminarem na
   mesma linha.

   Os nomes têm comprimentos diferentes: "Poder & Negócios" e "Gazeta de
   Brasília" quebram em DUAS linhas na largura da coluna, e "IstoÉ
   Negócios" cabe em UMA. Sem uma altura mínima, o rodapé da IstoÉ ficava
   ~20px mais baixo que o dos vizinhos — e o card inteiro terminava antes,
   parecendo que a IMAGEM dela era menor. Não era: as três capas em retrato
   são idênticas (1024x1536).

   4.6rem é o que cabe duas linhas do nome mais o respiro. Se um dia entrar
   um veículo de nome ainda mais longo, que quebre em três linhas, este
   valor sobe junto — ou o desalinho volta. */
#ds-site-wrapper .ds-cover__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .95rem 1.1rem;
  min-height: 4.6rem;
  border-top: 1px solid var(--ds-line);
}

#ds-site-wrapper .ds-cover__name {
  font-family: var(--ds-font-display);
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ds-text);
  transition: color .3s ease;
}

#ds-site-wrapper .ds-cover:hover .ds-cover__name { color: var(--ds-accent); }

#ds-site-wrapper .ds-cover__go {
  flex: none;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-muted);
  transition: color .3s ease, transform .3s ease;
}

#ds-site-wrapper .ds-cover:hover .ds-cover__go {
  color: var(--ds-accent);
  transform: translateX(3px);
}


/* ==========================================================================
   4. TEASER — o player do Panda Video

   NÃO É O MESMO MECANISMO DOS VÍDEOS DE CIMA. Aqueles são do YouTube e
   usam a "facade" do JS global: capa primeiro, player só no clique.

   Aqui o player é do Panda, que serve o próprio embed e não expõe uma capa
   que a gente possa mostrar antes. Então o iframe entra direto — com
   `loading="lazy"` no HTML, que adia o carregamento até ele estar perto da
   tela. Quem nunca rolar até aqui não paga por ele.

   A MOLDURA É QUEM MANDA NA MEDIDA. O embed do Panda vinha com
   width="720" height="360" fixos, que estourariam a tela no celular.
   Aqui o iframe preenche a moldura, e a moldura é fluida.
   ========================================================================== */

#ds-site-wrapper .ds-teaser__box {
  max-width: 58rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}

#ds-site-wrapper .ds-teaser__frame {
  position: relative;
  border-radius: var(--ds-radius);
  overflow: hidden;
  border: 1px solid var(--ds-line);
  background: var(--ds-bg-card);
  /* 16/9 é o padrão de vídeo. SE O TEASER FOR OUTRO FORMATO — vertical
     para stories, ou quadrado — é este valor que muda, e só ele. */
  aspect-ratio: 16 / 9;
}

#ds-site-wrapper .ds-teaser__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;               /* o style="border:none" do embed veio para cá */
  display: block;
}

#ds-site-wrapper .ds-teaser__cap {
  margin-top: .9rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ds-muted);
}


/* A FAIXA DE CHAMADA FINAL (.ds-close) SAIU DESTA PÁGINA.

   O rodapé já abre com uma chamada e o botão de contato, logo abaixo —
   duas chamadas coladas pediam a mesma coisa duas vezes em meia tela. As
   regras dela foram removidas junto para não ficarem órfãs aqui.

   A página "Para Empresas" mantém a dela, com CSS próprio no arquivo dela:
   lá o percurso é mais longo e o rodapé fica mais distante do último
   assunto. */


/* ==========================================================================
   5. SEÇÕES CENTRADAS DESTA PÁGINA
   ========================================================================== */

#ds-site-wrapper .ds-videos,
#ds-site-wrapper .ds-pressblock,
#ds-site-wrapper .ds-teaser { text-align: center; }

#ds-site-wrapper .ds-videos .ds-eyebrow,
#ds-site-wrapper .ds-pressblock .ds-eyebrow,
#ds-site-wrapper .ds-teaser .ds-eyebrow { justify-content: center; }

#ds-site-wrapper .ds-videos .ds-lead,
#ds-site-wrapper .ds-pressblock .ds-lead,
#ds-site-wrapper .ds-teaser .ds-lead {
  margin-inline: auto;
  max-width: 62ch;
}

/* O miolo destas seções tem texto próprio alinhado à esquerda — a caixa da
   imprensa e as legendas dos vídeos. Só o cabeçalho é que fica centrado.
   (A legenda do teaser é a exceção: ela É centrada, junto com a seção.) */
#ds-site-wrapper .ds-press,
#ds-site-wrapper .ds-vmain,
#ds-site-wrapper .ds-vgrid { text-align: left; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c29964 *//* ==========================================================================
   1. HERO DE PAGINA INTERNA

   DIFERENTE DO HERO DA HOME, e de proposito.

   Na home a arte é uma FIGURA recortada — a Débora de corpo inteiro — e por
   isso lá a imagem nunca é cortada: entra com height:auto e o bloco assume
   a proporção do arquivo. Cortar tiraria a pessoa da foto.

   Aqui a imagem é AMBIENTE (plateia, palco, sala), não figura. Ambiente
   aguenta corte: o assunto está espalhado pelo quadro inteiro, então
   `object-fit: cover` numa altura fixa funciona e dá um hero de altura
   previsível — que é o que uma página interna precisa, porque ela não é a
   abertura do site e não deve tomar a tela toda.

   O véu escuro por cima não é enfeite: sem ele o texto branco sobre uma
   foto clara de plateia fica ilegível. Ele é mais forte à esquerda, onde o
   texto vive, e alivia à direita.
   ========================================================================== */

#ds-site-wrapper .ds-pagehero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(400px, 56vh, 600px);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--ds-line);
}

#ds-site-wrapper .ds-pagehero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;   /* 30% e não 50%: o rosto costuma estar acima do centro */
}

/* O véu. Dois degradês somados: um horizontal, que protege a coluna do
   texto, e um vertical, que costura o hero com o preto da seção seguinte. */
#ds-site-wrapper .ds-pagehero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,7,7,.95) 0%, rgba(8,7,7,.86) 38%, rgba(8,7,7,.45) 78%, rgba(8,7,7,.35) 100%),
    linear-gradient(to top, var(--ds-bg) 0%, rgba(8,7,7,0) 32%);
}

/* No celular o degradê horizontal não serve: o texto ocupa a largura toda,
   então o véu precisa ser parelho de um lado ao outro. */
@media (max-width: 767px) {
  #ds-site-wrapper .ds-pagehero::before {
    background:
      linear-gradient(180deg, rgba(8,7,7,.82) 0%, rgba(8,7,7,.9) 100%),
      linear-gradient(to top, var(--ds-bg) 0%, rgba(8,7,7,0) 26%);
  }
}

#ds-site-wrapper .ds-pagehero__body { max-width: 46rem; }

/* Herda o corpo e o peso do .ds-title global (Playfair 700, caixa alta),
   só sobe de tamanho: é o H1 da página. */
#ds-site-wrapper .ds-pagehero .ds-title {
  font-size: clamp(2.1rem, 5vw, 3.9rem);
}

#ds-site-wrapper .ds-pagehero .ds-lead {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  color: #C6C0B8;                /* mais claro que o --ds-muted: aqui o fundo é foto, não preto chapado */
  max-width: 54ch;
}


/* ==========================================================================
   2. 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); }


/* ==========================================================================
   3. 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; }


/* ==========================================================================
   4. 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;
}


/* ==========================================================================
   5. 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 */
}


/* ==========================================================================
   6. 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 */