.elementor-3331 .elementor-element.elementor-element-1333ada{--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;}/* Start custom CSS for html, class: .elementor-element-9eb6862 */#ds-site-wrapper .ds-contato {
  position: relative;
  padding-block: clamp(2.8rem, 6vw, 4.6rem) clamp(3.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--ds-line);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

/* Um brilho dourado muito baixo no alto da seção. Substitui a foto do hero
   das outras páginas: dá profundidade ao topo sem competir com os campos,
   que é o que uma foto faria.

   Ele era ancorado à direita, atrás da coluna do formulário. Com o
   empilhamento centrado, foi para o meio — o `left: 50%` mais o
   `translateX(-50%)` o centram sem depender da largura, que é fluida. */
#ds-site-wrapper .ds-contato::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -34%;
  left: 50%;
  transform: translateX(-50%);
  width: min(58rem, 96vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
              rgba(217,164,65,.13) 0%,
              rgba(217,164,65,.05) 42%,
              rgba(217,164,65,0) 70%);
}

/* Uma coluna só, em qualquer largura. O `gap` é o espaço entre o texto e o
   formulário. */
#ds-site-wrapper .ds-contato__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 4.5vw, 3.2rem);
  /* Sem `justify-items: center`: ele faria cada bloco encolher até o
     tamanho do conteúdo, e o formulário perderia a largura que a gente
     acabou de dar a ele. Quem centra são os `margin-inline: auto` de cada
     um, junto com o `max-width` — assim cada bloco tem o próprio teto. */
}

/* O texto não vai até os 1220px do container: numa linha dessa largura o
   olho perde o começo da próxima. 52rem é o teto do título; a chamada tem
   o dela em `ch`, mais apertado ainda, porque é texto corrido. */
#ds-site-wrapper .ds-contato__intro {
  max-width: 52rem;
  margin-inline: auto;
}

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

#ds-site-wrapper .ds-contato .ds-title {
  font-size: clamp(2rem, 4.6vw, 3.6rem);   /* é o H1 desta página */
  text-wrap: balance;                      /* reparte as linhas em vez de deixar uma órfã */
}

#ds-site-wrapper .ds-contato .ds-lead {
  margin-top: 1.4rem;
  margin-inline: auto;
  max-width: 58ch;
}


/* ==========================================================================
   2. A CAIXA DO FORMULÁRIO (GoHighLevel)

   >>> O IFRAME É DE OUTRO DOMÍNIO, E ISSO MUDA AS REGRAS <<<

   O formulário mora em link.trajetoriadosucesso.com.br. Nada do nosso CSS
   atravessa a borda do iframe: cor de campo, fonte, botão de enviar — tudo
   isso se ajusta DENTRO do GoHighLevel, no editor do formulário, e não
   aqui. Se o formulário aparecer com fundo branco no meio do site escuro,
   o lugar de corrigir é lá.

   O QUE ESTA CAIXA FAZ é dar a ele uma moldura que pertence ao site: fundo
   de card, borda, cantos arredondados e o respiro em volta.

   >>> A ALTURA: QUEM MANDA É O SCRIPT DO GOHIGHLEVEL <<<
   O form_embed.js mede o conteúdo real do formulário e escreve a altura em
   pixels direto no atributo `style` do iframe — inclusive quando o
   formulário cresce, porque um campo mostrou erro ou porque ele tem várias
   etapas.

   Por isso NÃO HÁ `height` nem `min-height` no CSS desta caixa. Se
   houvesse, o `min-height` venceria a altura calculada pelo script (é
   assim que o CSS resolve o conflito) e o formulário ficaria travado numa
   altura errada — ou com um vão embaixo, ou cortado.

   A altura inicial de 680px está escrita no próprio HTML, no atributo
   `style` do iframe, e vale só até o script responder. Ela também é a
   rede de segurança: se o script for bloqueado (bloqueador de anúncios,
   consentimento de cookies negado), o iframe fica com 680px e o formulário
   rola por dentro. Cabe, e funciona.
   ========================================================================== */

#ds-site-wrapper .ds-formbox {
  position: relative;
  /* >>> A LARGURA DO FORMULÁRIO ESTÁ AQUI <<<
     Quando ele dividia a seção com o texto, sobrava-lhe metade do
     container — uns 520px de área útil depois do respiro do card, e nessa
     medida os campos do GoHighLevel ficam achatados e altos.

     46rem (~736px) é o teto de agora. Não é "quanto mais largo melhor":
     acima de ~800px um campo de uma linha vira uma faixa comprida demais e
     o formulário começa a parecer uma planilha. Se um dia precisar de mais
     ou de menos, É ESTE NÚMERO — nada mais depende dele. */
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  border-radius: var(--ds-radius);
  border: 1px solid var(--ds-line);
  background: var(--ds-bg-card);
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  /* A seção inteira é centrada, mas AQUI DENTRO o texto volta a alinhar à
     esquerda: o cabeçalho do card fica na mesma prumada dos rótulos dos
     campos do formulário, que são alinhados à esquerda dentro do iframe.
     Centrado, ele flutuaria fora do eixo de tudo o que vem abaixo. */
  text-align: left;
  /* A âncora "#formulario" aponta para cá. Sem o scroll-margin, o header
     grudento cobriria o topo da caixa em quem chegasse pela âncora.

     Nenhum botão DESTA página aponta mais para ela — quem apontava era a
     faixa "Débora Santos no seu evento", removida a pedido da cliente. A
     regra fica porque a âncora continua valendo para link de fora: um
     e-mail ou anúncio pode mandar direto para /contato/#formulario. */
  scroll-margin-top: calc(var(--ds-header-h) + 1.2rem);
}

/* Fio dourado no topo da caixa: o mesmo recurso do header, e serve para
   dizer "é aqui" sem precisar de um selo ou de uma seta. */
#ds-site-wrapper .ds-formbox::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto 0;
  height: 2px;
  border-radius: var(--ds-radius) var(--ds-radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--ds-accent) 25%,
                              var(--ds-accent-light) 50%, var(--ds-accent) 75%, transparent);
}

#ds-site-wrapper .ds-formbox__head {
  padding: .4rem .4rem 1.1rem;
  border-bottom: 1px solid var(--ds-line);
  margin-bottom: .9rem;
}

#ds-site-wrapper .ds-formbox__title {
  font-family: var(--ds-font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ds-text);
}

#ds-site-wrapper .ds-formbox__note {
  margin-top: .5rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ds-muted);
}

#ds-site-wrapper .ds-formbox__frame {
  position: relative;
  border-radius: 8px;
  overflow: hidden;            /* casa com o border-radius do próprio iframe */
  line-height: 0;              /* mata a folga que a linha de texto deixaria embaixo */
}

/* `display: block` é o que importa aqui. Iframe nasce inline, e inline
   herda a "linha de base" do texto — o que deixaria uns 4px de vão embaixo
   dele, visíveis contra o fundo do card.

   Repare que não há `height` nesta regra: é intencional. Ver o bloco de
   comentário acima. */
#ds-site-wrapper .ds-formbox__frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* ==========================================================================
   3. ONDE ACOMPANHAR — Instagram, YouTube e TS Club

   Os três da copy, em cards iguais. Iguais de propósito: no momento em que
   a pessoa já mandou (ou já decidiu não mandar) o formulário, os três
   valem o mesmo — são jeitos de continuar por perto, não uma escada.

   O TS Club é o único que leva para FORA do domínio dela e é um produto,
   não uma rede. Por isso ele ganha a borda dourada: continua do tamanho
   dos outros, mas se identifica como coisa diferente.
   ========================================================================== */

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

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

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

#ds-site-wrapper .ds-canais__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: clamp(2.5rem, 5vw, 3.4rem);
  text-align: left;            /* devolve o alinhamento: a seção é centrada, o card não */
}

@media (min-width: 760px) {
  #ds-site-wrapper .ds-canais__grid { grid-template-columns: repeat(3, 1fr); }
}

#ds-site-wrapper .ds-canal {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border-radius: var(--ds-radius);
  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-canal:hover {
  transform: translateY(-6px);
  border-color: var(--ds-accent-line);
  box-shadow: 0 22px 50px -22px rgba(0,0,0,.9);
}

#ds-site-wrapper .ds-canal__label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ds-muted);
}

#ds-site-wrapper .ds-canal__handle {
  font-family: var(--ds-font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ds-text);
  word-break: break-word;
  transition: color .3s ease;
}

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

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

/* `margin-top: auto` empurra o "ir" para o pé do card. É o que faz os três
   terminarem na mesma linha mesmo com descrições de tamanhos diferentes —
   sem isso, o card de descrição mais curta ficaria com o link subindo. */
#ds-site-wrapper .ds-canal__go {
  margin-top: auto;
  padding-top: .9rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-accent);
  transition: transform .3s ease;
}

#ds-site-wrapper .ds-canal:hover .ds-canal__go { transform: translateX(3px); }

/* O TS Club: mesma caixa, borda dourada desde o repouso. */
#ds-site-wrapper .ds-canal--club {
  border-color: var(--ds-accent-line);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(217,164,65,.08) 0%, rgba(217,164,65,0) 60%),
    var(--ds-bg-card);
}/* End custom CSS */