.elementor-10 .elementor-element.elementor-element-74a8099{--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-caf089b */#ds-site-wrapper .ds-hero {
  position: relative;
  background: var(--ds-bg);
}

/* O palco é o container de medida do texto (container query). */
#ds-site-wrapper .ds-hero__stage {
  position: relative;
  container-type: inline-size;
  max-width: 2200px;      /* teto: em telas gigantes para de crescer */
  margin-inline: auto;
}

#ds-site-wrapper .ds-hero__bg,
#ds-site-wrapper .ds-hero__bg img {
  display: block;
  width: 100%;
  height: auto;           /* a altura segue a imagem: sem corte, nunca */
}

/* Camada de texto, sobreposta à arte. */
#ds-site-wrapper .ds-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

#ds-site-wrapper .ds-hero__inner {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
}

/* No desktop o texto ocupa no máximo 44% da coluna, o que o mantém a uma
   boa distância do ombro da figura (que começa por volta dos 51%).
   O font-size em cqw é a base de escala: os filhos usam em, então tudo
   cresce e encolhe na mesma proporção da arte. */
#ds-site-wrapper .ds-hero__body {
  max-width: 44%;
  font-size: clamp(11px, 1.02cqw, 20px);
}

/* Fallback para navegador sem container queries: vw no lugar de cqw. */
@supports not (container-type: inline-size) {
  #ds-site-wrapper .ds-hero__body { font-size: clamp(11px, 1.02vw, 20px); }
}

/* O RITMO VERTICAL DO HERO

   Alvo: ~1em de respiro em cada vão, medido na escala do hero.

     H1  ─┐
          │  ~1.05em   <- tag { margin-top: 1.6em }
     tag ─┘
          │  ~1.03em   <- tag { margin-bottom: .5em } + lead { margin-top: .5em }
     H2  ─┘

   TRÊS ARMADILHAS moram aqui. Vale ler antes de mexer nos números.

   1) `em` NA MARGEM É RELATIVO AO PRÓPRIO FONT-SIZE DO ELEMENTO, não ao do
      hero. A etiqueta tem font-size .66em, então o `margin-top: 1.6em`
      dela vale 1.6 x .66 = ~1.05em na escala do hero. O H2 tem font-size
      1.4em, então o `margin-top: .5em` dele vale .5 x 1.4 = .7em.
      É por isso que dois valores tão diferentes produzem vãos parecidos —
      e por isso copiar um número de um para o outro dá errado.

   2) AS MARGENS NÃO COLAPSAM entre a etiqueta e o H2. A etiqueta é
      inline-block, e inline-block não colapsa margem vertical com o irmão:
      os dois valores SOMAM. Era daí que vinham os ~2.4em de vão da versão
      anterior (1.3em da etiqueta + 1.1em do H2, ambos convertidos).

   3) O H1 NÃO TEM MARGEM INFERIOR (o reset zera) e a etiqueta não tinha
      superior — a distância entre os dois era ZERO. O que os separava era
      só a sobra da caixa de linha do H1, e com line-height .96 essa caixa
      é mais curta que a própria letra. Resultado: a etiqueta subia e
      encostava no "SANTOS".

   Mexer nestes valores mexe no orçamento de altura do celular; o cálculo
   está no bloco @media, mais abaixo. */
#ds-site-wrapper .ds-hero__tag {
  display: inline-block;
  padding: .5em 1.05em;
  border: 1px solid var(--ds-accent-dim);
  border-radius: 100px;
  background: rgba(217, 164, 65, .06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: .66em;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ds-accent);
  margin-top: 1.6em;       /* = ~1.05em na escala do hero. Antes: zero */
  margin-bottom: .5em;     /* = ~.33em. SOMA com o margin-top do H2 */
}

/* O NOME, em ouro escovado e digitado. É o H1 e o maior elemento da
   página. São 12 caracteres: digitado a 26ms cada, ele termina em 0,3s —
   rápido o bastante para ser a primeira coisa a aparecer sem fazer
   ninguém esperar.

   Quebra em duas linhas pelo <span> (Débora / Santos): empilhado, o nome
   ocupa metade da largura e pode crescer bem mais do que numa linha só. */
/* Peso, entrelinha e espacejamento são os da PLAYFAIR, não os que estavam
   aqui na época da Manrope. Uma didone em caixa alta precisa de outra
   medida: em 800 as serifas começam a fechar as contraformas, e o
   letter-spacing de -0.035em, que abria bem a geométrica, encostava as
   serifas de letras vizinhas umas nas outras. */
#ds-site-wrapper .ds-hero__title {
  font-family: var(--ds-font-display);
  font-size: 4.2em;
  font-weight: 700;
  line-height: .96;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* Aqui o span só quebra a linha — a cor vem da .ds-goldtext, que está no
   H1 inteiro. Por isso ele NÃO leva color, ao contrário do span dos
   títulos de seção, onde só a segunda linha é dourada. */
#ds-site-wrapper .ds-hero__title > span:not(.ds-char):not(.ds-caret) {
  display: block;
}

/* A frase da copy, que era o H1 e agora é o H2 logo abaixo do nome.
   Sem text-transform: são 125 caracteres, e em caixa alta a frase ganharia
   ~15% de largura e perderia a forma das palavras — que é justamente o que
   permite ler uma frase comprida de relance. */
#ds-site-wrapper .ds-hero__lead {
  font-size: 1.4em;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.012em;
  margin-top: .5em;        /* = .7em na escala do hero (font-size 1.4em) */
  text-wrap: balance;
}

/* Destaque INLINE (ao contrário do .ds-title, que é bloco): marca um trecho
   no meio da frase, não uma segunda linha. */
#ds-site-wrapper .ds-hero__lead > span { color: var(--ds-accent); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #ds-site-wrapper .ds-hero__lead > 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-hero__desc {
  margin-top: 1.4em;
  color: var(--ds-muted);
  font-size: .92em;
  line-height: 1.6;
  padding-left: .9em;
  border-left: 2px solid var(--ds-accent);
}

#ds-site-wrapper .ds-hero__desc strong {
  color: var(--ds-text);
  font-weight: 600;
}

#ds-site-wrapper .ds-hero__body .ds-btn-row { margin-top: 1.7em; }

/* O botão também escala com o banner, para não ficar desproporcional. */
#ds-site-wrapper .ds-hero__body .ds-btn {
  padding: 1em 2em;
  font-size: .82em;
}

/* --- Celular ------------------------------------------------------------
   A arte muda de orientação: o texto vai para o TOPO, onde há área livre,
   e a figura ocupa a metade de baixo. O bloco é limitado a 44% da altura
   para nunca encostar no ponto mais alto dela (~50% da altura do arquivo).
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  #ds-site-wrapper .ds-hero__overlay {
    align-items: flex-start;
    padding-top: 5%;
  }

  #ds-site-wrapper .ds-hero__body {
    max-width: 100%;
    max-height: 44%;
    font-size: clamp(12.5px, 4.1cqw, 21px);
    text-align: center;
  }

  @supports not (container-type: inline-size) {
    #ds-site-wrapper .ds-hero__body { font-size: clamp(12.5px, 4.1vw, 21px); }
  }

  /* O nome continua sendo o maior elemento, mas cede altura: são duas
     linhas, e cada 0,1em aqui custa ~3px do orçamento de 44% que o bloco
     inteiro tem antes de encostar na figura. */
  #ds-site-wrapper .ds-hero__title {
    font-size: 3em;
    letter-spacing: -0.03em;
  }

  /* O `margin-top: 1.6em` da regra base continua valendo aqui, mas a
     etiqueta encolheu para .58em — e como a margem é relativa ao próprio
     font-size, ela encolhe junto: 1.6 x .58 = ~.93em na escala do hero,
     contra ~1.05em do desktop. É o comportamento desejado, não um
     descuido: no celular cada pixel vertical é disputado. */
  #ds-site-wrapper .ds-hero__tag {
    font-size: .58em;
    padding: .42em .9em;
    margin-bottom: .5em;     /* = ~.29em na escala do hero */
  }

  /* 1.1em contra 1.4em do desktop: a frase tem 125 caracteres e aqui a
     largura útil é a tela inteira, mas a ALTURA é o que aperta.

     O ORÇAMENTO, num aparelho de 375px (base de 15.4px, teto de ~295px):

       nome, 2 linhas ......... 89px
       vão até a etiqueta ..... 14px
       etiqueta ............... 24px
       vão até a frase ........ 14px   (4.5 da etiqueta + 9.3 daqui)
       frase, 4 linhas ........ 85px
       vão até o botão ........ 17px
       botão .................. 39px
                               ------
                                282px, contra ~295px disponíveis

     São ~13px de folga antes de o texto encostar na figura. Qualquer
     aumento aqui precisa sair de outro item da lista. */
  #ds-site-wrapper .ds-hero__lead {
    font-size: 1.1em;
    line-height: 1.25;
    margin-top: .55em;       /* = ~.61em na escala do hero */
  }

  /* O parágrafo de autoridade sai do banner no celular: não há altura livre
     para ele. Não se perde nada — o mesmo conteúdo (os 26 anos, os times
     comerciais) reaparece logo abaixo, na faixa de NÚMEROS e na seção de
     HISTÓRIA. Para trazê-lo de volta, troque por display:block e reduza o
     font-size do body. */
  #ds-site-wrapper .ds-hero__desc { display: none; }

  #ds-site-wrapper .ds-hero__body .ds-btn-row {
    margin-top: 1.1em;
    gap: .55em;
    justify-content: center;
  }

  /* O botão acompanha a escala do banner em vez de ocupar 100% da largura
     (a regra geral de mobile), senão ele avançaria sobre a figura. */
  #ds-site-wrapper .ds-hero__body .ds-btn {
    width: auto;
    padding: .8em 1.6em;
  }
}


/* ==========================================================================
   6. SEÇÃO 2 — NÚMEROS QUE IMPACTAM

   Subiu para logo depois do hero, no lugar que era do carrossel de logos
   de clientes. A troca é de propósito: as logos eram do Grupo TS e falavam
   de um portfólio coletivo; os números falam da trajetória DELA, que é o
   assunto desta página.

   Os valores sobem de 0 até o alvo quando entram na tela (ver ARQUIVO 3).
   ========================================================================== */

#ds-site-wrapper .ds-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;                              /* o gap vira a própria linha divisória */
  background: var(--ds-line);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  overflow: hidden;
  margin-top: clamp(2.5rem, 5vw, 3.8rem);
}

/* São 4 métricas: 2x2 no celular e 4 em linha no desktop. Número par nas
   duas pontas, então nenhuma sobra sozinha na grade. */
@media (min-width: 1000px) {
  #ds-site-wrapper .ds-stats { grid-template-columns: repeat(4, 1fr); }
}

/* No celular a seção inteira fica centralizada: como os números já são
   centrados, um cabeçalho alinhado à esquerda quebrava o eixo. */
@media (max-width: 767px) {
  #ds-site-wrapper .ds-numbers .ds-container { text-align: center; }
  #ds-site-wrapper .ds-numbers .ds-eyebrow { justify-content: center; }
}

#ds-site-wrapper .ds-stat {
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.5rem);
  background: var(--ds-bg);
  text-align: center;
  transition: background-color .35s ease;
}

#ds-site-wrapper .ds-stat:hover { background: var(--ds-bg-card); }

/* Leva a classe .ds-goldtext no HTML — o degradê e o fallback vêm de lá.
   O typewriter não passa por aqui, então o número nunca é dividido em
   caracteres e o degradê fica no próprio elemento. */
#ds-site-wrapper .ds-stat__value {
  font-size: clamp(1.55rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

#ds-site-wrapper .ds-stat__label {
  margin-top: .85rem;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--ds-muted);
}


/* ==========================================================================
   7. SEÇÃO 3 — POSICIONAMENTO
   Frase grande à esquerda, texto corrido + citação à direita.
   ========================================================================== */

#ds-site-wrapper .ds-manifesto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  #ds-site-wrapper .ds-manifesto__grid {
    grid-template-columns: .95fr 1.05fr;
    align-items: start;
  }
}

/* Citação em destaque, com aspa gigante decorativa. */
#ds-site-wrapper .ds-quote {
  position: relative;
  margin-top: 2.6rem;
  padding: 2rem 2rem 2rem 3.6rem;
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-line);
  border-left: 2px solid var(--ds-accent);
  border-radius: var(--ds-radius);
}

#ds-site-wrapper .ds-quote::before {
  content: '\201C';
  position: absolute;
  top: .1em;
  left: .45rem;
  font-size: 4.6rem;
  line-height: 1;
  color: var(--ds-accent);
  opacity: .3;
  font-family: Georgia, 'Times New Roman', serif;
}

#ds-site-wrapper .ds-quote p {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
}

#ds-site-wrapper .ds-quote cite {
  display: block;
  margin-top: 1.1rem;
  font-style: normal;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-accent);
}


/* ==========================================================================
   8. SEÇÃO 4 — HISTÓRIA E EXPERTISE
   Foto à esquerda, texto à direita. É o único bloco da página com retrato
   dela sozinha.
   ========================================================================== */

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

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

/* z-index:0 cria um contexto de empilhamento próprio. Sem isso, a cantoneira
   decorativa (z-index:-1) seria pintada ATRÁS do fundo da seção e sumiria. */
#ds-site-wrapper .ds-person__media { position: relative; z-index: 0; }

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

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

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

/* Cantoneira decorativa, deslocada da moldura. Recebe o dourado sólido, não
   o degradê: é uma borda de 2px, e num filete dessa espessura o degradê não
   tem área para ser percebido — só suja a cor. */
#ds-site-wrapper .ds-person__media::before {
  content: '';
  position: absolute;
  top: -18px;
  left: -18px;
  width: 96px;
  height: 96px;
  border: 2px solid var(--ds-accent);
  border-right: 0;
  border-bottom: 0;
  border-radius: 4px;
  z-index: -1;
  opacity: .55;
}

/* Selo com o nome, sobreposto ao pé da foto. */
#ds-site-wrapper .ds-person__badge {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
  padding: .6rem 1rem;
  background: rgba(8, 7, 7, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--ds-line);
  border-radius: 8px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#ds-site-wrapper .ds-person__badge small {
  display: block;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ds-accent);
  margin-top: .2rem;
}

/* --- Cards de pilares (3 colunas) --------------------------------------- */

#ds-site-wrapper .ds-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

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

#ds-site-wrapper .ds-pillar {
  position: relative;
  padding: 1.9rem 1.6rem;
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, background-color .35s ease;
}

/* Barra que cresce da esquerda no hover. */
#ds-site-wrapper .ds-pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 2px;
  background: var(--ds-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}

#ds-site-wrapper .ds-pillar:hover {
  transform: translateY(-6px);
  border-color: var(--ds-accent-line);
  background: #171412;
}

#ds-site-wrapper .ds-pillar:hover::before { transform: scaleY(1); }

#ds-site-wrapper .ds-pillar__num {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ds-accent);
  margin-bottom: .9rem;
}

#ds-site-wrapper .ds-pillar h3 {
  font-size: var(--ds-h3);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .6rem;
}

#ds-site-wrapper .ds-pillar p {
  font-size: .9rem;
  color: var(--ds-muted);
  line-height: 1.62;
}


/* ==========================================================================
   9. SEÇÃO 5 — AUTORIDADE E RESULTADOS (bloco centrado, sem foto dela)

   Esta seção não tem retrato da Débora: ele já aparece na SEÇÃO 4 e,
   repetido logo em seguida, dava a impressão de que a página tinha travado
   numa seção só. Sem a coluna de imagem, o texto ganha o eixo central e a
   seção funciona como pausa entre dois blocos assimétricos. As três fotos
   que entram no meio são dos empresários, não dela.
   ========================================================================== */

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

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

/* O .ds-lead nasce alinhado à esquerda com max-width em ch; aqui ele só
   precisa ser centralizado no eixo, mantendo a mesma medida de leitura. */
#ds-site-wrapper .ds-authority .ds-lead {
  margin-inline: auto;
  max-width: 68ch;
}

#ds-site-wrapper .ds-authority .ds-title { margin-bottom: 1.6rem; }


/* --- Destaques em coluna (o contraponto dos cards numerados) -------------
   Mesmo conteúdo estrutural dos .ds-pillar da SEÇÃO 4, tratamento oposto:
   sem caixa, sem fundo e sem numeração. São três colunas separadas por uma
   linha fina, cada uma anunciada por um traço que se estende no hover.
   Assim as duas seções não se parecem.
   ----------------------------------------------------------------------- */

#ds-site-wrapper .ds-highlights {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(2.8rem, 5vw, 4.2rem);
}

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

#ds-site-wrapper .ds-highlight {
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1rem, 2.5vw, 1.8rem);
}

/* A divisória acompanha a direção da grade: horizontal no celular (onde
   os itens se empilham) e vertical no desktop. */
#ds-site-wrapper .ds-highlight + .ds-highlight {
  border-top: 1px solid var(--ds-line);
}

@media (min-width: 700px) {
  #ds-site-wrapper .ds-highlight + .ds-highlight {
    border-top: 0;
    border-left: 1px solid var(--ds-line);
  }
}

/* Traço no lugar do número. */
#ds-site-wrapper .ds-highlight::before {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  margin: 0 auto 1.4rem;
  background: var(--ds-gold);
  transition: width .45s cubic-bezier(.2,.7,.3,1);
}

#ds-site-wrapper .ds-highlight:hover::before { width: 68px; }

#ds-site-wrapper .ds-highlight h3 {
  font-size: var(--ds-h3);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .7rem;
  transition: color .35s ease;
}

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

#ds-site-wrapper .ds-highlight p {
  font-size: .9rem;
  color: var(--ds-muted);
  line-height: 1.62;
  max-width: 34ch;
  margin-inline: auto;
}


/* --- Os grandes nomes, em foto -------------------------------------------
   Três fotos entre os parágrafos e os destaques, para "experiência ao lado
   de grandes nomes" ter rosto. A moldura repete a linguagem da SEÇÃO 4
   (borda fina, cantos arredondados, zoom lento no hover), em escala menor:
   aqui a foto ilustra o texto, não é o assunto da seção.

   A moldura é QUADRADA porque os três arquivos são 800x800. Com 1/1 nada é
   recortado. Foto nova aqui deve ser quadrada também — noutra proporção o
   cover corta, e como são fotos de GRUPO (a Débora aparece junto em todas),
   o corte tira gente da foto.
   ----------------------------------------------------------------------- */

#ds-site-wrapper .ds-trained {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 2.2vw, 1.6rem);
  margin-top: clamp(2.6rem, 4.5vw, 3.6rem);
}

/* Abaixo de 560px as três lado a lado dariam ~100px cada, e num grupo de
   quatro pessoas isso deixa cada rosto com ~20px — ninguém reconhece
   ninguém, que é justamente o ponto da seção. Então empilham, com largura
   travada para a coluna não virar um bloco de fotos gigantes. */
@media (max-width: 559px) {
  #ds-site-wrapper .ds-trained {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    max-width: 300px;
    margin-inline: auto;
  }
}

#ds-site-wrapper .ds-trained__frame {
  position: relative;
  border-radius: var(--ds-radius);
  overflow: hidden;
  border: 1px solid var(--ds-line);
  background: var(--ds-bg-card);
  aspect-ratio: 1 / 1;
  transition: border-color .35s ease;
}

/* height:100% vence o height:auto do reset de img — é ele que faz a foto
   preencher a moldura de proporção fixa, seja qual for o tamanho do
   arquivo. */
#ds-site-wrapper .ds-trained__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}

#ds-site-wrapper .ds-trained__item:hover .ds-trained__frame {
  border-color: var(--ds-accent);
}

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

/* O nome vai embaixo da foto, não por cima: cada retrato tem um
   enquadramento diferente e um nome sobreposto cairia num lugar diferente
   em cada um dos três.

   >>> POR QUE ESTA REGRA DECLARA TANTA COISA ÓBVIA <<<
   Ela é um <figcaption>, e quase todo tema de WordPress redecora o dele:
   itálico, cinza claro e centrado, como legenda de foto de blog. Era o que
   estava acontecendo — os três nomes saíam em cinza itálico sobre preto,
   com contraste de ~4:1 e a forma errada. Nome de empresário não é
   comentário sobre a foto: é a informação que a seção inteira existe para
   dar.

   O reset do CSS global já desfaz o estrago (ver o bloco `figcaption` lá).
   Aqui a legenda ganha a forma que ela deve ter, escrita por extenso e sem
   depender de herança nenhuma:

     . color explícito ..... branco puro, ~20:1 contra o fundo
     . font-style normal ... o itálico não volta nem se o tema mudar
     . um degrau de corpo .. de .95rem para 1.05rem no desktop
     . text-align center ... centrado sob a foto quadrada, POR ESCOLHA e
                             não porque o tema mandou
   ----------------------------------------------------------------------- */
#ds-site-wrapper .ds-trained__name {
  margin-top: 1rem;
  font-family: var(--ds-font);
  font-size: clamp(.88rem, 1.5vw, 1.05rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: .005em;
  color: var(--ds-text);
  text-align: center;
  transition: color .35s ease;
}

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


/* ==========================================================================
   10. SEÇÃO 6 — EXPANSÃO GLOBAL E RECONHECIMENTO
   ========================================================================== */

#ds-site-wrapper .ds-eco__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 3.8rem);
}

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

/* >>> A PROPORÇÃO DA MOLDURA É A DA FOTO, e é assim de propósito <<<

   1920/930 é o tamanho real do arquivo. Com a moldura na mesma proporção,
   o `object-fit: cover` não tem o que cortar: a foto entra inteira.

   Antes aqui havia um `21 / 8` fixo, escolhido para a foto do time do
   Grupo TS. Ele comia ~21% da altura de qualquer foto nessa proporção — o
   que na foto de agora levaria embora as mãos dela, na base do quadro.

   AO TROCAR A FOTO, TROQUE ESTE NÚMERO JUNTO. É a mesma regra das capas de
   imprensa da página de Mídia: a moldura serve à foto, não o contrário. */
#ds-site-wrapper .ds-eco__banner {
  position: relative;
  border-radius: var(--ds-radius);
  overflow: hidden;
  border: 1px solid var(--ds-line);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  aspect-ratio: 1920 / 930;
}

/* No celular a proporção real viraria uma tira de ~180px de altura, e as
   etiquetas das sedes — que aí quebram em duas linhas — cobririam quase
   tudo. Em 16/9 a faixa cresce e sobra altura para elas.

   AQUI SIM HÁ CORTE, mas ele é lateral: a moldura fica mais "quadrada" que
   a foto, então saem as bordas da esquerda e da direita, não o topo nem a
   base. Débora está praticamente no centro do quadro, e é o painel de LED
   que sobra nas pontas — o corte tira cenário, não gente. */
@media (max-width: 700px) {
  #ds-site-wrapper .ds-eco__banner { aspect-ratio: 16 / 9; }
}

/* O escurecimento existe só para o nome das sedes, escrito por cima,
   continuar legível — não é efeito preto e branco. É leve porque a foto já
   traz o rosto dela e escurecer demais o apagaria; o degradê do ::after já
   dá quase todo o contraste que as etiquetas precisam, já que ficam no
   rodapé. */
#ds-site-wrapper .ds-eco__banner .ds-slide { filter: brightness(.82); }

#ds-site-wrapper .ds-eco__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(8,7,7,.8), rgba(8,7,7,.15) 60%);
  pointer-events: none;
}

/* Sedes sobrepostas ao banner. */
#ds-site-wrapper .ds-eco__cities {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1rem, 3vw, 1.8rem);
}

#ds-site-wrapper .ds-eco__city {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: clamp(.65rem, 1.2vw, .78rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#ds-site-wrapper .ds-eco__city::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-accent);
  box-shadow: 0 0 0 4px rgba(217, 164, 65, .18);
  flex: none;
}

/* Os dois parágrafos que sobram da copy, lado a lado. Em coluna única eles
   ocupariam os 1220px do container — mais de 100 caracteres por linha, e a
   essa largura o olho erra a volta para o começo da linha seguinte.
   O .ds-lead já traz max-width em ch, então cada coluna se autolimita. */
#ds-site-wrapper .ds-eco__text {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2.5vw, 2.4rem);
  margin-bottom: clamp(2.2rem, 4vw, 3rem);
}

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

/* --- Cards dos 3 pilares de atuação ------------------------------------- */

#ds-site-wrapper .ds-eco__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

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

#ds-site-wrapper .ds-eco__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.1rem 1.8rem;
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease;
}

/* Brilho radial que acende no canto superior do card. */
#ds-site-wrapper .ds-eco__card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(217, 164, 65, .17), transparent 68%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}

#ds-site-wrapper .ds-eco__card:hover {
  transform: translateY(-6px);
  border-color: var(--ds-accent-line);
}

#ds-site-wrapper .ds-eco__card:hover::after { opacity: 1; }

#ds-site-wrapper .ds-eco__card h3 {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

#ds-site-wrapper .ds-eco__card p {
  font-size: .9rem;
  color: var(--ds-muted);
  line-height: 1.62;
  flex: 1;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-74a8099 *//* ==========================================================================
   5. SEÇÃO 1 — HERO
   ========================================================================== */

/* --- REGRA DE OURO DESTE HERO -------------------------------------------
   A imagem NUNCA é cortada. Ela entra como <img> com width:100% e
   height:auto, então a altura do bloco é sempre a proporção real do
   arquivo. É por isso que a figura não some em nenhuma largura de tela —
   nada de background-size:cover, que recortaria justamente o lado onde
   ela está.

   ATENÇÃO: as medidas abaixo foram tiradas da arte PROVISÓRIA (a do
   Renan), que é a que está no ar nesta página. A arte da Débora precisa
   respeitar os mesmos limites, senão estas regras têm de ser refeitas:

     DESKTOP  1920x930 (2.06:1) .. figura a partir de ~51% da LARGURA,
                                   metade esquerda livre para o texto.
     MOBILE    750x1340 (0.56:1) .. figura a partir de ~50% da ALTURA,
                                   metade de cima livre para o texto.

   O texto é dimensionado em cqw (percentual da largura do banner), então
   ele encolhe e cresce junto com a arte e nunca invade a figura.

   A HIERARQUIA DO BLOCO, de cima para baixo:

     .ds-hero__title  H1  o NOME, ouro escovado, digitado, 4.2em
     .ds-hero__tag    --  os cargos, na pílula
     .ds-hero__lead   H2  a frase principal da copy, 1.4em
     .ds-hero__desc   p   o texto de autoridade (some no celular)

   O nome cresceu para 4.2em porque quebra em DUAS linhas pelo <span>
   (Débora / Santos): empilhado ele ocupa metade da largura do bloco e
   sobra espaço para crescer. Numa linha só, esse corpo estouraria os 44%.
   ----------------------------------------------------------------------- */

#ds-site-wrapper .ds-hero {
  position: relative;
  background: var(--ds-bg);
}

/* O palco é o container de medida do texto (container query). */
#ds-site-wrapper .ds-hero__stage {
  position: relative;
  container-type: inline-size;
  max-width: 2200px;      /* teto: em telas gigantes para de crescer */
  margin-inline: auto;
}

#ds-site-wrapper .ds-hero__bg,
#ds-site-wrapper .ds-hero__bg img {
  display: block;
  width: 100%;
  height: auto;           /* a altura segue a imagem: sem corte, nunca */
}

/* Camada de texto, sobreposta à arte. */
#ds-site-wrapper .ds-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

#ds-site-wrapper .ds-hero__inner {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
}

/* No desktop o texto ocupa no máximo 44% da coluna, o que o mantém a uma
   boa distância do ombro da figura (que começa por volta dos 51%).
   O font-size em cqw é a base de escala: os filhos usam em, então tudo
   cresce e encolhe na mesma proporção da arte. */
#ds-site-wrapper .ds-hero__body {
  max-width: 44%;
  font-size: clamp(11px, 1.02cqw, 20px);
}

/* Fallback para navegador sem container queries: vw no lugar de cqw. */
@supports not (container-type: inline-size) {
  #ds-site-wrapper .ds-hero__body { font-size: clamp(11px, 1.02vw, 20px); }
}

/* O RITMO VERTICAL DO HERO

   Alvo: ~1em de respiro em cada vão, medido na escala do hero.

     H1  ─┐
          │  ~1.05em   <- tag { margin-top: 1.6em }
     tag ─┘
          │  ~1.03em   <- tag { margin-bottom: .5em } + lead { margin-top: .5em }
     H2  ─┘

   TRÊS ARMADILHAS moram aqui. Vale ler antes de mexer nos números.

   1) `em` NA MARGEM É RELATIVO AO PRÓPRIO FONT-SIZE DO ELEMENTO, não ao do
      hero. A etiqueta tem font-size .66em, então o `margin-top: 1.6em`
      dela vale 1.6 x .66 = ~1.05em na escala do hero. O H2 tem font-size
      1.4em, então o `margin-top: .5em` dele vale .5 x 1.4 = .7em.
      É por isso que dois valores tão diferentes produzem vãos parecidos —
      e por isso copiar um número de um para o outro dá errado.

   2) AS MARGENS NÃO COLAPSAM entre a etiqueta e o H2. A etiqueta é
      inline-block, e inline-block não colapsa margem vertical com o irmão:
      os dois valores SOMAM. Era daí que vinham os ~2.4em de vão da versão
      anterior (1.3em da etiqueta + 1.1em do H2, ambos convertidos).

   3) O H1 NÃO TEM MARGEM INFERIOR (o reset zera) e a etiqueta não tinha
      superior — a distância entre os dois era ZERO. O que os separava era
      só a sobra da caixa de linha do H1, e com line-height .96 essa caixa
      é mais curta que a própria letra. Resultado: a etiqueta subia e
      encostava no "SANTOS".

   Mexer nestes valores mexe no orçamento de altura do celular; o cálculo
   está no bloco @media, mais abaixo. */
#ds-site-wrapper .ds-hero__tag {
  display: inline-block;
  padding: .5em 1.05em;
  border: 1px solid var(--ds-accent-dim);
  border-radius: 100px;
  background: rgba(217, 164, 65, .06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: .66em;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ds-accent);
  margin-top: 1.6em;       /* = ~1.05em na escala do hero. Antes: zero */
  margin-bottom: .5em;     /* = ~.33em. SOMA com o margin-top do H2 */
}

/* O NOME, em ouro escovado e digitado. É o H1 e o maior elemento da
   página. São 12 caracteres: digitado a 26ms cada, ele termina em 0,3s —
   rápido o bastante para ser a primeira coisa a aparecer sem fazer
   ninguém esperar.

   Quebra em duas linhas pelo <span> (Débora / Santos): empilhado, o nome
   ocupa metade da largura e pode crescer bem mais do que numa linha só. */
/* Peso, entrelinha e espacejamento são os da PLAYFAIR, não os que estavam
   aqui na época da Manrope. Uma didone em caixa alta precisa de outra
   medida: em 800 as serifas começam a fechar as contraformas, e o
   letter-spacing de -0.035em, que abria bem a geométrica, encostava as
   serifas de letras vizinhas umas nas outras. */
#ds-site-wrapper .ds-hero__title {
  font-family: var(--ds-font-display);
  font-size: 4.2em;
  font-weight: 700;
  line-height: .96;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* Aqui o span só quebra a linha — a cor vem da .ds-goldtext, que está no
   H1 inteiro. Por isso ele NÃO leva color, ao contrário do span dos
   títulos de seção, onde só a segunda linha é dourada. */
#ds-site-wrapper .ds-hero__title > span:not(.ds-char):not(.ds-caret) {
  display: block;
}

/* A frase da copy, que era o H1 e agora é o H2 logo abaixo do nome.
   Sem text-transform: são 125 caracteres, e em caixa alta a frase ganharia
   ~15% de largura e perderia a forma das palavras — que é justamente o que
   permite ler uma frase comprida de relance. */
#ds-site-wrapper .ds-hero__lead {
  font-size: 1.4em;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.012em;
  margin-top: .5em;        /* = .7em na escala do hero (font-size 1.4em) */
  text-wrap: balance;
}

/* Destaque INLINE (ao contrário do .ds-title, que é bloco): marca um trecho
   no meio da frase, não uma segunda linha. */
#ds-site-wrapper .ds-hero__lead > span { color: var(--ds-accent); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #ds-site-wrapper .ds-hero__lead > 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-hero__desc {
  margin-top: 1.4em;
  color: var(--ds-muted);
  font-size: .92em;
  line-height: 1.6;
  padding-left: .9em;
  border-left: 2px solid var(--ds-accent);
}

#ds-site-wrapper .ds-hero__desc strong {
  color: var(--ds-text);
  font-weight: 600;
}

#ds-site-wrapper .ds-hero__body .ds-btn-row { margin-top: 1.7em; }

/* O botão também escala com o banner, para não ficar desproporcional. */
#ds-site-wrapper .ds-hero__body .ds-btn {
  padding: 1em 2em;
  font-size: .82em;
}

/* --- Celular ------------------------------------------------------------
   A arte muda de orientação: o texto vai para o TOPO, onde há área livre,
   e a figura ocupa a metade de baixo. O bloco é limitado a 44% da altura
   para nunca encostar no ponto mais alto dela (~50% da altura do arquivo).
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  #ds-site-wrapper .ds-hero__overlay {
    align-items: flex-start;
    padding-top: 5%;
  }

  #ds-site-wrapper .ds-hero__body {
    max-width: 100%;
    max-height: 44%;
    font-size: clamp(12.5px, 4.1cqw, 21px);
    text-align: center;
  }

  @supports not (container-type: inline-size) {
    #ds-site-wrapper .ds-hero__body { font-size: clamp(12.5px, 4.1vw, 21px); }
  }

  /* O nome continua sendo o maior elemento, mas cede altura: são duas
     linhas, e cada 0,1em aqui custa ~3px do orçamento de 44% que o bloco
     inteiro tem antes de encostar na figura. */
  #ds-site-wrapper .ds-hero__title {
    font-size: 3em;
    letter-spacing: -0.03em;
  }

  /* O `margin-top: 1.6em` da regra base continua valendo aqui, mas a
     etiqueta encolheu para .58em — e como a margem é relativa ao próprio
     font-size, ela encolhe junto: 1.6 x .58 = ~.93em na escala do hero,
     contra ~1.05em do desktop. É o comportamento desejado, não um
     descuido: no celular cada pixel vertical é disputado. */
  #ds-site-wrapper .ds-hero__tag {
    font-size: .58em;
    padding: .42em .9em;
    margin-bottom: .5em;     /* = ~.29em na escala do hero */
  }

  /* 1.1em contra 1.4em do desktop: a frase tem 125 caracteres e aqui a
     largura útil é a tela inteira, mas a ALTURA é o que aperta.

     O ORÇAMENTO, num aparelho de 375px (base de 15.4px, teto de ~295px):

       nome, 2 linhas ......... 89px
       vão até a etiqueta ..... 14px
       etiqueta ............... 24px
       vão até a frase ........ 14px   (4.5 da etiqueta + 9.3 daqui)
       frase, 4 linhas ........ 85px
       vão até o botão ........ 17px
       botão .................. 39px
                               ------
                                282px, contra ~295px disponíveis

     São ~13px de folga antes de o texto encostar na figura. Qualquer
     aumento aqui precisa sair de outro item da lista. */
  #ds-site-wrapper .ds-hero__lead {
    font-size: 1.1em;
    line-height: 1.25;
    margin-top: .55em;       /* = ~.61em na escala do hero */
  }

  /* O parágrafo de autoridade sai do banner no celular: não há altura livre
     para ele. Não se perde nada — o mesmo conteúdo (os 26 anos, os times
     comerciais) reaparece logo abaixo, na faixa de NÚMEROS e na seção de
     HISTÓRIA. Para trazê-lo de volta, troque por display:block e reduza o
     font-size do body. */
  #ds-site-wrapper .ds-hero__desc { display: none; }

  #ds-site-wrapper .ds-hero__body .ds-btn-row {
    margin-top: 1.1em;
    gap: .55em;
    justify-content: center;
  }

  /* O botão acompanha a escala do banner em vez de ocupar 100% da largura
     (a regra geral de mobile), senão ele avançaria sobre a figura. */
  #ds-site-wrapper .ds-hero__body .ds-btn {
    width: auto;
    padding: .8em 1.6em;
  }
}


/* ==========================================================================
   6. SEÇÃO 2 — NÚMEROS QUE IMPACTAM

   Subiu para logo depois do hero, no lugar que era do carrossel de logos
   de clientes. A troca é de propósito: as logos eram do Grupo TS e falavam
   de um portfólio coletivo; os números falam da trajetória DELA, que é o
   assunto desta página.

   Os valores sobem de 0 até o alvo quando entram na tela (ver ARQUIVO 3).
   ========================================================================== */

#ds-site-wrapper .ds-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;                              /* o gap vira a própria linha divisória */
  background: var(--ds-line);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  overflow: hidden;
  margin-top: clamp(2.5rem, 5vw, 3.8rem);
}

/* São 4 métricas: 2x2 no celular e 4 em linha no desktop. Número par nas
   duas pontas, então nenhuma sobra sozinha na grade. */
@media (min-width: 1000px) {
  #ds-site-wrapper .ds-stats { grid-template-columns: repeat(4, 1fr); }
}

/* No celular a seção inteira fica centralizada: como os números já são
   centrados, um cabeçalho alinhado à esquerda quebrava o eixo. */
@media (max-width: 767px) {
  #ds-site-wrapper .ds-numbers .ds-container { text-align: center; }
  #ds-site-wrapper .ds-numbers .ds-eyebrow { justify-content: center; }
}

#ds-site-wrapper .ds-stat {
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.5rem);
  background: var(--ds-bg);
  text-align: center;
  transition: background-color .35s ease;
}

#ds-site-wrapper .ds-stat:hover { background: var(--ds-bg-card); }

/* Leva a classe .ds-goldtext no HTML — o degradê e o fallback vêm de lá.
   O typewriter não passa por aqui, então o número nunca é dividido em
   caracteres e o degradê fica no próprio elemento. */
#ds-site-wrapper .ds-stat__value {
  font-size: clamp(1.55rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

#ds-site-wrapper .ds-stat__label {
  margin-top: .85rem;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--ds-muted);
}


/* ==========================================================================
   7. SEÇÃO 3 — POSICIONAMENTO
   Frase grande à esquerda, texto corrido + citação à direita.
   ========================================================================== */

#ds-site-wrapper .ds-manifesto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  #ds-site-wrapper .ds-manifesto__grid {
    grid-template-columns: .95fr 1.05fr;
    align-items: start;
  }
}

/* Citação em destaque, com aspa gigante decorativa. */
#ds-site-wrapper .ds-quote {
  position: relative;
  margin-top: 2.6rem;
  padding: 2rem 2rem 2rem 3.6rem;
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-line);
  border-left: 2px solid var(--ds-accent);
  border-radius: var(--ds-radius);
}

#ds-site-wrapper .ds-quote::before {
  content: '\201C';
  position: absolute;
  top: .1em;
  left: .45rem;
  font-size: 4.6rem;
  line-height: 1;
  color: var(--ds-accent);
  opacity: .3;
  font-family: Georgia, 'Times New Roman', serif;
}

#ds-site-wrapper .ds-quote p {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
}

#ds-site-wrapper .ds-quote cite {
  display: block;
  margin-top: 1.1rem;
  font-style: normal;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-accent);
}


/* ==========================================================================
   8. SEÇÃO 4 — HISTÓRIA E EXPERTISE
   Foto à esquerda, texto à direita. É o único bloco da página com retrato
   dela sozinha.
   ========================================================================== */

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

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

/* z-index:0 cria um contexto de empilhamento próprio. Sem isso, a cantoneira
   decorativa (z-index:-1) seria pintada ATRÁS do fundo da seção e sumiria. */
#ds-site-wrapper .ds-person__media { position: relative; z-index: 0; }

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

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

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

/* Cantoneira decorativa, deslocada da moldura. Recebe o dourado sólido, não
   o degradê: é uma borda de 2px, e num filete dessa espessura o degradê não
   tem área para ser percebido — só suja a cor. */
#ds-site-wrapper .ds-person__media::before {
  content: '';
  position: absolute;
  top: -18px;
  left: -18px;
  width: 96px;
  height: 96px;
  border: 2px solid var(--ds-accent);
  border-right: 0;
  border-bottom: 0;
  border-radius: 4px;
  z-index: -1;
  opacity: .55;
}

/* Selo com o nome, sobreposto ao pé da foto. */
#ds-site-wrapper .ds-person__badge {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
  padding: .6rem 1rem;
  background: rgba(8, 7, 7, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--ds-line);
  border-radius: 8px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#ds-site-wrapper .ds-person__badge small {
  display: block;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ds-accent);
  margin-top: .2rem;
}

/* --- Cards de pilares (3 colunas) --------------------------------------- */

#ds-site-wrapper .ds-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

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

#ds-site-wrapper .ds-pillar {
  position: relative;
  padding: 1.9rem 1.6rem;
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, background-color .35s ease;
}

/* Barra que cresce da esquerda no hover. */
#ds-site-wrapper .ds-pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 2px;
  background: var(--ds-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}

#ds-site-wrapper .ds-pillar:hover {
  transform: translateY(-6px);
  border-color: var(--ds-accent-line);
  background: #171412;
}

#ds-site-wrapper .ds-pillar:hover::before { transform: scaleY(1); }

#ds-site-wrapper .ds-pillar__num {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ds-accent);
  margin-bottom: .9rem;
}

#ds-site-wrapper .ds-pillar h3 {
  font-size: var(--ds-h3);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .6rem;
}

#ds-site-wrapper .ds-pillar p {
  font-size: .9rem;
  color: var(--ds-muted);
  line-height: 1.62;
}


/* ==========================================================================
   9. SEÇÃO 5 — AUTORIDADE E RESULTADOS (bloco centrado, sem foto dela)

   Esta seção não tem retrato da Débora: ele já aparece na SEÇÃO 4 e,
   repetido logo em seguida, dava a impressão de que a página tinha travado
   numa seção só. Sem a coluna de imagem, o texto ganha o eixo central e a
   seção funciona como pausa entre dois blocos assimétricos. As três fotos
   que entram no meio são dos empresários, não dela.
   ========================================================================== */

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

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

/* O .ds-lead nasce alinhado à esquerda com max-width em ch; aqui ele só
   precisa ser centralizado no eixo, mantendo a mesma medida de leitura. */
#ds-site-wrapper .ds-authority .ds-lead {
  margin-inline: auto;
  max-width: 68ch;
}

#ds-site-wrapper .ds-authority .ds-title { margin-bottom: 1.6rem; }


/* --- Destaques em coluna (o contraponto dos cards numerados) -------------
   Mesmo conteúdo estrutural dos .ds-pillar da SEÇÃO 4, tratamento oposto:
   sem caixa, sem fundo e sem numeração. São três colunas separadas por uma
   linha fina, cada uma anunciada por um traço que se estende no hover.
   Assim as duas seções não se parecem.
   ----------------------------------------------------------------------- */

#ds-site-wrapper .ds-highlights {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(2.8rem, 5vw, 4.2rem);
}

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

#ds-site-wrapper .ds-highlight {
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1rem, 2.5vw, 1.8rem);
}

/* A divisória acompanha a direção da grade: horizontal no celular (onde
   os itens se empilham) e vertical no desktop. */
#ds-site-wrapper .ds-highlight + .ds-highlight {
  border-top: 1px solid var(--ds-line);
}

@media (min-width: 700px) {
  #ds-site-wrapper .ds-highlight + .ds-highlight {
    border-top: 0;
    border-left: 1px solid var(--ds-line);
  }
}

/* Traço no lugar do número. */
#ds-site-wrapper .ds-highlight::before {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  margin: 0 auto 1.4rem;
  background: var(--ds-gold);
  transition: width .45s cubic-bezier(.2,.7,.3,1);
}

#ds-site-wrapper .ds-highlight:hover::before { width: 68px; }

#ds-site-wrapper .ds-highlight h3 {
  font-size: var(--ds-h3);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .7rem;
  transition: color .35s ease;
}

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

#ds-site-wrapper .ds-highlight p {
  font-size: .9rem;
  color: var(--ds-muted);
  line-height: 1.62;
  max-width: 34ch;
  margin-inline: auto;
}


/* --- Os grandes nomes, em foto -------------------------------------------
   Três fotos entre os parágrafos e os destaques, para "experiência ao lado
   de grandes nomes" ter rosto. A moldura repete a linguagem da SEÇÃO 4
   (borda fina, cantos arredondados, zoom lento no hover), em escala menor:
   aqui a foto ilustra o texto, não é o assunto da seção.

   A moldura é QUADRADA porque os três arquivos são 800x800. Com 1/1 nada é
   recortado. Foto nova aqui deve ser quadrada também — noutra proporção o
   cover corta, e como são fotos de GRUPO (a Débora aparece junto em todas),
   o corte tira gente da foto.
   ----------------------------------------------------------------------- */

#ds-site-wrapper .ds-trained {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 2.2vw, 1.6rem);
  margin-top: clamp(2.6rem, 4.5vw, 3.6rem);
}

/* Abaixo de 560px as três lado a lado dariam ~100px cada, e num grupo de
   quatro pessoas isso deixa cada rosto com ~20px — ninguém reconhece
   ninguém, que é justamente o ponto da seção. Então empilham, com largura
   travada para a coluna não virar um bloco de fotos gigantes. */
@media (max-width: 559px) {
  #ds-site-wrapper .ds-trained {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    max-width: 300px;
    margin-inline: auto;
  }
}

#ds-site-wrapper .ds-trained__frame {
  position: relative;
  border-radius: var(--ds-radius);
  overflow: hidden;
  border: 1px solid var(--ds-line);
  background: var(--ds-bg-card);
  aspect-ratio: 1 / 1;
  transition: border-color .35s ease;
}

/* height:100% vence o height:auto do reset de img — é ele que faz a foto
   preencher a moldura de proporção fixa, seja qual for o tamanho do
   arquivo. */
#ds-site-wrapper .ds-trained__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}

#ds-site-wrapper .ds-trained__item:hover .ds-trained__frame {
  border-color: var(--ds-accent);
}

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

/* O nome vai embaixo da foto, não por cima: cada retrato tem um
   enquadramento diferente e um nome sobreposto cairia num lugar diferente
   em cada um dos três. */
#ds-site-wrapper .ds-trained__name {
  margin-top: .9rem;
  font-size: clamp(.8rem, 1.4vw, .95rem);
  font-weight: 700;
  line-height: 1.35;
  transition: color .35s ease;
}

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


/* ==========================================================================
   10. SEÇÃO 6 — EXPANSÃO GLOBAL E RECONHECIMENTO
   ========================================================================== */

#ds-site-wrapper .ds-eco__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 3.8rem);
}

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

#ds-site-wrapper .ds-eco__banner {
  position: relative;
  border-radius: var(--ds-radius);
  overflow: hidden;
  border: 1px solid var(--ds-line);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  aspect-ratio: 21 / 8;
}

/* No celular a faixa de 21/8 viraria uma tira de ~130px de altura, e a foto
   do time (são dezenas de pessoas) ficaria ilegível — sem contar que as
   etiquetas das sedes, que aí quebram em duas linhas, cobririam quase tudo.
   Aqui o banner assume a proporção da própria foto (16/9), então ela
   aparece quase inteira e sobra altura para as etiquetas. */
@media (max-width: 700px) {
  #ds-site-wrapper .ds-eco__banner { aspect-ratio: 16 / 9; }
}

/* O escurecimento existe só para o nome das sedes, escrito por cima,
   continuar legível — não é efeito preto e branco. É leve porque a foto é
   do time e escurecer demais apagava os rostos; o degradê do ::after já dá
   quase todo o contraste que as etiquetas precisam, já que ficam no rodapé. */
#ds-site-wrapper .ds-eco__banner .ds-slide { filter: brightness(.82); }

#ds-site-wrapper .ds-eco__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(8,7,7,.8), rgba(8,7,7,.15) 60%);
  pointer-events: none;
}

/* Sedes sobrepostas ao banner. */
#ds-site-wrapper .ds-eco__cities {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1rem, 3vw, 1.8rem);
}

#ds-site-wrapper .ds-eco__city {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: clamp(.65rem, 1.2vw, .78rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#ds-site-wrapper .ds-eco__city::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-accent);
  box-shadow: 0 0 0 4px rgba(217, 164, 65, .18);
  flex: none;
}

/* Os dois parágrafos que sobram da copy, lado a lado. Em coluna única eles
   ocupariam os 1220px do container — mais de 100 caracteres por linha, e a
   essa largura o olho erra a volta para o começo da linha seguinte.
   O .ds-lead já traz max-width em ch, então cada coluna se autolimita. */
#ds-site-wrapper .ds-eco__text {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2.5vw, 2.4rem);
  margin-bottom: clamp(2.2rem, 4vw, 3rem);
}

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

/* --- Cards dos 3 pilares de atuação ------------------------------------- */

#ds-site-wrapper .ds-eco__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

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

#ds-site-wrapper .ds-eco__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.1rem 1.8rem;
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease;
}

/* Brilho radial que acende no canto superior do card. */
#ds-site-wrapper .ds-eco__card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(217, 164, 65, .17), transparent 68%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}

#ds-site-wrapper .ds-eco__card:hover {
  transform: translateY(-6px);
  border-color: var(--ds-accent-line);
}

#ds-site-wrapper .ds-eco__card:hover::after { opacity: 1; }

#ds-site-wrapper .ds-eco__card h3 {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

#ds-site-wrapper .ds-eco__card p {
  font-size: .9rem;
  color: var(--ds-muted);
  line-height: 1.62;
  flex: 1;
}/* End custom CSS */