.elementor-5255 .elementor-element.elementor-element-cdb09c7{--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 */#ts-midiakit-wrapper {
  /* --- paleta --- */
  --ts-bg:            #090808;
  --ts-bg-soft:       #0F0E0E;   /* faixas alternadas */
  --ts-bg-card:       #121111;   /* fundo de card */
  --ts-accent:        #FFC107;
  --ts-accent-dim:    rgba(255, 193, 7, 0.14);
  --ts-text:          #FFFFFF;
  --ts-muted:         #8A8A8A;
  --ts-line:          rgba(255, 255, 255, 0.09);

  /* --- tipografia fluida (escala com a tela, sem media query) --- */
  --ts-h1:      clamp(2.4rem, 4.6vw, 4.2rem);
  --ts-h2:      clamp(1.9rem, 4.2vw, 3.4rem);
  --ts-h3:      clamp(1.15rem, 1.7vw, 1.4rem);
  --ts-body:    clamp(0.95rem, 1.1vw, 1.05rem);

  /* --- ritmo --- */
  --ts-section-y: clamp(4.5rem, 9vw, 8.5rem);
  --ts-radius:    14px;

  /* --- base --- */
  background: var(--ts-bg);
  color: var(--ts-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;      /* trava scroll lateral causado pelos glows */
  position: relative;
  isolation: isolate;      /* cria contexto de empilhamento próprio */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset cirúrgico — só o necessário para o Elementor não interferir. */
#ts-midiakit-wrapper *,
#ts-midiakit-wrapper *::before,
#ts-midiakit-wrapper *::after { box-sizing: border-box; }

#ts-midiakit-wrapper h1,
#ts-midiakit-wrapper h2,
#ts-midiakit-wrapper h3,
#ts-midiakit-wrapper h4,
#ts-midiakit-wrapper p,
#ts-midiakit-wrapper ul,
#ts-midiakit-wrapper ol,
#ts-midiakit-wrapper li,
#ts-midiakit-wrapper figure,
#ts-midiakit-wrapper blockquote {
  margin: 0;
  padding: 0;
  font-family: inherit;
}

#ts-midiakit-wrapper ul,
#ts-midiakit-wrapper ol { list-style: none; }

#ts-midiakit-wrapper img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

#ts-midiakit-wrapper a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}

#ts-midiakit-wrapper button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Foco visível para navegação por teclado (acessibilidade). */
#ts-midiakit-wrapper a:focus-visible,
#ts-midiakit-wrapper button:focus-visible {
  outline: 2px solid var(--ts-accent);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ==========================================================================
   2. LAYOUT BASE — container, seção, faixas
   ========================================================================== */

#ts-midiakit-wrapper .ts-container {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  z-index: 1;              /* mantém o conteúdo acima da textura de fundo */
}

#ts-midiakit-wrapper .ts-section {
  position: relative;
  padding-block: var(--ts-section-y);
}

/* --- Faixa clara com textura fosca --------------------------------------
   O grão é um SVG de ruído embutido como data URI: não faz requisição de
   rede, não depende de arquivo externo e pesa poucos bytes. Ele quebra o
   chapado da cor e deixa a leitura mais confortável.
   Para calibrar a intensidade, mexa só no opacity da regra ::before.
   ----------------------------------------------------------------------- */

#ts-midiakit-wrapper .ts-section--soft {
  background: var(--ts-bg-soft);
  isolation: isolate;
}

#ts-midiakit-wrapper .ts-section--soft::before,
#ts-midiakit-wrapper .ts-clients::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.09'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}

/* Brilho difuso no topo da faixa clara, para ela não parecer um bloco seco. */
#ts-midiakit-wrapper .ts-section--soft::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.022), transparent);
}

/* Linha divisória sutil no topo da seção. */
#ts-midiakit-wrapper .ts-section--line { border-top: 1px solid var(--ts-line); }


/* ==========================================================================
   3. TIPOGRAFIA E ELEMENTOS RECORRENTES
   ========================================================================== */

/* Etiqueta pequena em caps acima dos títulos (padrão da referência). */
#ts-midiakit-wrapper .ts-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ts-muted);
  margin-bottom: 1.35rem;
}

/* Traço curto em accent que antecede a etiqueta. */
#ts-midiakit-wrapper .ts-eyebrow::before {
  content: '';
  width: 34px;
  height: 2px;
  background: var(--ts-accent);
  flex: none;
}

/* Título de seção em 2 pesos/cores — a linha 2 recebe o accent. */
#ts-midiakit-wrapper .ts-title {
  font-size: var(--ts-h2);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

/* ATENÇÃO ao seletor: ele precisa atingir SÓ o span de destaque (filho
   direto), nunca os spans de caractere criados pelo typewriter. Sem o
   :not(), cada letra do título vira um bloco e o texto empilha na
   vertical, uma letra por linha. */
#ts-midiakit-wrapper .ts-title > span:not(.ts-char):not(.ts-caret) {
  display: block;
  color: var(--ts-accent);
}

/* Modificador para títulos cuja primeira parte é curta demais (o caso do
   "O" antes de "Furacão das Vendas"). Em bloco, essa palavra ficaria
   sozinha numa linha inteira — órfã. Aqui o destaque flui inline com o
   texto e o balance reparte as linhas em tamanhos parecidos. */
#ts-midiakit-wrapper .ts-title--inline { text-wrap: balance; }

#ts-midiakit-wrapper .ts-title--inline > span:not(.ts-char):not(.ts-caret) {
  display: inline;
}

#ts-midiakit-wrapper .ts-lead {
  font-size: var(--ts-body);
  color: var(--ts-muted);
  max-width: 62ch;
}

#ts-midiakit-wrapper .ts-lead + .ts-lead { margin-top: 1.1rem; }

#ts-midiakit-wrapper .ts-lead strong {
  color: var(--ts-text);
  font-weight: 600;
}

/* --- Botões ------------------------------------------------------------- */

#ts-midiakit-wrapper .ts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 1.05rem 2.1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease,
              background-color .25s ease, color .25s ease, border-color .25s ease;
}

#ts-midiakit-wrapper .ts-btn--primary {
  background: var(--ts-accent);
  color: #090808;
  box-shadow: 0 8px 30px -10px rgba(255, 193, 7, .55);
}

#ts-midiakit-wrapper .ts-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -12px rgba(255, 193, 7, .8);
}

/* Brilho que atravessa o botão primário no hover. */
#ts-midiakit-wrapper .ts-btn--primary::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}

#ts-midiakit-wrapper .ts-btn--primary:hover::after { left: 120%; }

#ts-midiakit-wrapper .ts-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.4rem;
}

/* CTA que fecha uma seção: mais respiro em cima e centralizado no desktop. */
#ts-midiakit-wrapper .ts-cta-inline {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  justify-content: center;
}

/* No celular os botões ocupam a largura toda, para virar alvo de toque. */
@media (max-width: 560px) {
  #ts-midiakit-wrapper .ts-btn-row .ts-btn {
    width: 100%;
    padding-inline: 1rem;
  }
}


/* ==========================================================================
   4. 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 o Renan e a Débora jamais somem, em qualquer
   largura de tela — nada de background-size:cover, que recortaria as
   laterais justamente onde eles estão.

   Arquivos e áreas livres medidas:
     DESKTOP  1920x930 (2.06:1) .. pessoas a partir de ~48% da LARGURA,
                                   metade esquerda livre para o texto.
     MOBILE    750x1340 (0.56:1) .. pessoas a partir de ~47% da ALTURA,
                                   topo 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 as pessoas.
   ----------------------------------------------------------------------- */

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

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

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

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

#ts-midiakit-wrapper .ts-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 do Renan (que começa por volta dos 48%).
   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. */
#ts-midiakit-wrapper .ts-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) {
  #ts-midiakit-wrapper .ts-hero__body { font-size: clamp(11px, 1.02vw, 20px); }
}

#ts-midiakit-wrapper .ts-hero__tag {
  display: inline-block;
  padding: .5em 1.05em;
  border: 1px solid var(--ts-accent-dim);
  border-radius: 100px;
  background: rgba(255,193,7,.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ts-accent);
  margin-bottom: 1.5em;
}

#ts-midiakit-wrapper .ts-hero__title {
  font-size: 3.1em;
  font-weight: 900;
  line-height: .95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

/* Mesmo cuidado do .ts-title: só o span de destaque, nunca os caracteres. */
#ts-midiakit-wrapper .ts-hero__title > span:not(.ts-char):not(.ts-caret) {
  display: block;
  color: var(--ts-accent);
}

#ts-midiakit-wrapper .ts-hero__sub {
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ts-text);
  margin-top: 1.4em;
  padding-left: .9em;
  border-left: 2px solid var(--ts-accent);
}

#ts-midiakit-wrapper .ts-hero__desc {
  margin-top: 1.3em;
  color: var(--ts-muted);
  font-size: .95em;
  line-height: 1.6;
}

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

#ts-midiakit-wrapper .ts-hero__body .ts-btn-row { margin-top: 1.9em; }

/* O botão também escala com o banner, para não ficar desproporcional. */
#ts-midiakit-wrapper .ts-hero__body .ts-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 as pessoas ocupam a metade de baixo. O bloco é limitado a 44% da
   altura para nunca encostar no cabelo do Renan.
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  #ts-midiakit-wrapper .ts-hero__overlay {
    align-items: flex-start;
    padding-top: 6%;
  }

  #ts-midiakit-wrapper .ts-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) {
    #ts-midiakit-wrapper .ts-hero__body { font-size: clamp(12.5px, 4.1vw, 21px); }
  }

  #ts-midiakit-wrapper .ts-hero__title { font-size: 2.3em; }

  /* Sem a barra lateral, que não faz sentido com o texto centralizado. */
  #ts-midiakit-wrapper .ts-hero__sub {
    padding-left: 0;
    border-left: 0;
    margin-top: 1em;
    font-size: 1.05em;
  }

  /* O parágrafo institucional sai do banner no celular: não há altura
     livre para ele sem cobrir as pessoas. O mesmo conteúdo é retomado
     logo abaixo, na seção POSICIONAMENTO. Para trazê-lo de volta, troque
     esta linha por display:block e reduza o font-size do body. */
  #ts-midiakit-wrapper .ts-hero__desc { display: none; }

  #ts-midiakit-wrapper .ts-hero__body .ts-btn-row {
    margin-top: 1.3em;
    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 as pessoas. */
  #ts-midiakit-wrapper .ts-hero__body .ts-btn {
    width: auto;
    padding: .95em 1.9em;
  }
}


/* ==========================================================================
   5. SEÇÃO 2 — FAIXA DE CLIENTES (carrossel infinito)

   Como funciona: a track tem 2 cópias idênticas da lista de logos e desliza
   até -50%, o que faz a 2ª cópia assumir exatamente a posição da 1ª — loop
   sem emenda. O espaçamento é feito com padding no item (não com gap), pois
   gap quebraria o cálculo do -50%.

   Desktop  → logo em preto e branco; hover devolve a cor e PAUSA a esteira.
   Mobile   → logos coloridas e esteira rodando direto (não há hover).
   ========================================================================== */

/* position:relative é o que ancora a textura fosca (regra na seção 2). */
#ts-midiakit-wrapper .ts-clients {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 3.6rem);
  border-block: 1px solid var(--ts-line);
  background: var(--ts-bg-soft);
  overflow: hidden;
}

#ts-midiakit-wrapper .ts-clients__label,
#ts-midiakit-wrapper .ts-clients__viewport { position: relative; z-index: 1; }

#ts-midiakit-wrapper .ts-clients__label {
  text-align: center;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ts-muted);
  margin-bottom: 2.1rem;
}

/* Viewport da esteira, com fade nas duas pontas. */
#ts-midiakit-wrapper .ts-clients__viewport {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* O padding vertical é OBRIGATÓRIO: o viewport tem overflow hidden e, sem
   essa folga, a logo ampliada no hover era cortada em cima e embaixo. */
#ts-midiakit-wrapper .ts-clients__track {
  display: flex;
  align-items: center;
  width: max-content;
  padding-block: 16px;
  animation: ts-marquee 42s linear infinite;
  will-change: transform;
}

@keyframes ts-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* A largura do item é o que define QUANTAS logos aparecem por vez.
   16.6vw = 100/6, então cabem ~6 logos na tela em qualquer resolução.
   No celular o mínimo de 165px assume o controle e mostram-se ~2.
   Para exibir mais ou menos logos, altere só o valor do meio do clamp. */
#ts-midiakit-wrapper .ts-clients__item {
  flex: none;
  width: clamp(165px, 16.6vw, 330px);
  padding-inline: clamp(1rem, 2vw, 2.2rem);  /* espaçamento SEM gap, p/ o -50% bater */
  display: flex;
  align-items: center;
  justify-content: center;
}

#ts-midiakit-wrapper .ts-clients__item img {
  height: clamp(52px, 6.5vw, 82px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: filter .4s ease, opacity .4s ease, transform .4s ease;
}

/* --- Celular ------------------------------------------------------------
   Quem manda no tamanho aparente da logo NÃO é a altura, é a LARGURA
   disponível. Como quase toda logo é horizontal (3:1, 4:1), definir só
   a altura não adianta: o max-width segura a imagem antes e o contain
   reduz a altura real para caber. Por isso aqui a logo passa a ocupar
   100% da largura do item, e a altura vira apenas um teto de segurança
   para as logos quadradas.

   O item em 58vw mostra 2 logos por vez (a segunda já entrando), com
   respiro mínimo nas laterais para sobrar largura para a arte.
   ----------------------------------------------------------------------- */
@media (max-width: 700px) {
  #ts-midiakit-wrapper .ts-clients__item {
    width: 58vw;
    padding-inline: .5rem;
  }

  #ts-midiakit-wrapper .ts-clients__item img {
    width: 100%;
    height: auto;
    max-height: 95px;
  }

  /* Fade mais curto nas pontas: com 12% as logos das bordas apareciam
     lavadas, o que também dava sensação de imagem pequena. */
  #ts-midiakit-wrapper .ts-clients__viewport {
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
}

/* Comportamento exclusivo de dispositivo com mouse real. */
@media (hover: hover) and (pointer: fine) {

  #ts-midiakit-wrapper .ts-clients__item img {
    filter: grayscale(1) brightness(1.7) contrast(.85);
    opacity: .5;
  }

  /* Pausa a esteira quando o mouse entra na área do carrossel. */
  #ts-midiakit-wrapper .ts-clients__viewport:hover .ts-clients__track {
    animation-play-state: paused;
  }

  /* A logo sob o cursor recupera a cor original. O scale é contido (1.06)
     para caber na folga vertical do track e nunca ser cortado. */
  #ts-midiakit-wrapper .ts-clients__item:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.06);
  }
}


/* ==========================================================================
   6. SEÇÃO 3 — POSICIONAMENTO / MANIFESTO
   ========================================================================== */

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

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

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

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

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

#ts-midiakit-wrapper .ts-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(--ts-accent);
}


/* ==========================================================================
   7. SEÇÕES 4 e 5 — BLOCOS RENAN E DÉBORA
   Mesmo componente; o modificador --rev inverte a ordem das colunas.
   ========================================================================== */

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

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

  /* Inverte visualmente sem mexer na ordem do HTML (mantém leitura lógica). */
  #ts-midiakit-wrapper .ts-person--rev .ts-person__media { order: 2; }
  #ts-midiakit-wrapper .ts-person--rev .ts-person__body  { order: 1; }
}

/* Moldura da foto: borda + cantos em accent + degradê. */
/* 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. */
#ts-midiakit-wrapper .ts-person__media { position: relative; z-index: 0; }

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

/* Foto colorida, sem filtro. */
#ts-midiakit-wrapper .ts-person__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}

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

/* Cantoneira decorativa em accent, deslocada da moldura. */
#ts-midiakit-wrapper .ts-person__media::before {
  content: '';
  position: absolute;
  width: 96px;
  height: 96px;
  border: 2px solid var(--ts-accent);
  border-radius: 4px;
  z-index: -1;
  opacity: .55;
}

#ts-midiakit-wrapper .ts-person:not(.ts-person--rev) .ts-person__media::before {
  top: -18px; left: -18px;
  border-right: 0; border-bottom: 0;
}

#ts-midiakit-wrapper .ts-person--rev .ts-person__media::before {
  bottom: -18px; right: -18px;
  border-left: 0; border-top: 0;
}

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

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

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

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

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

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

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

#ts-midiakit-wrapper .ts-pillar:hover {
  transform: translateY(-6px);
  border-color: rgba(255,193,7,.28);
  background: #161414;
}

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

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

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

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


/* ==========================================================================
   8. SEÇÃO 6 — ECOSSISTEMA GRUPO TS
   ========================================================================== */

#ts-midiakit-wrapper .ts-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) {
  #ts-midiakit-wrapper .ts-eco__head { grid-template-columns: 1fr 1fr; }
}

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

/* As imagens do banner do ecossistema são um slideshow (ver .ts-slide na
   seção 12.1). O brightness aqui existe só para o nome das sedes, escrito
   por cima, continuar legível — não é efeito preto e branco. */
#ts-midiakit-wrapper .ts-eco__banner .ts-slide { filter: brightness(.62); }

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

/* Sedes sobrepostas ao banner. */
#ts-midiakit-wrapper .ts-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);
}

#ts-midiakit-wrapper .ts-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;
}

#ts-midiakit-wrapper .ts-eco__city::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ts-accent);
  box-shadow: 0 0 0 4px rgba(255,193,7,.18);
  flex: none;
}

/* --- Cards das 3 empresas ----------------------------------------------- */

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

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

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

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

#ts-midiakit-wrapper .ts-eco__card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,193,7,.3);
}

#ts-midiakit-wrapper .ts-eco__card:hover::after { opacity: 1; }

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

#ts-midiakit-wrapper .ts-eco__card p {
  font-size: .9rem;
  color: var(--ts-muted);
  line-height: 1.62;
  flex: 1;
}

/* Métrica de rodapé do card. */
#ts-midiakit-wrapper .ts-eco__stat {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ts-line);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ts-accent);
}

/* Faixa de missão. */
#ts-midiakit-wrapper .ts-eco__mission {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  border: 1px solid var(--ts-accent-dim);
  border-radius: var(--ts-radius);
  background: linear-gradient(120deg, rgba(255,193,7,.07), transparent 60%);
  text-align: center;
}

#ts-midiakit-wrapper .ts-eco__mission strong {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ts-accent);
  margin-bottom: .8rem;
}

#ts-midiakit-wrapper .ts-eco__mission p {
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  font-weight: 500;
  line-height: 1.5;
  max-width: 68ch;
  margin-inline: auto;
}


/* ==========================================================================
   9. SEÇÃO 7 — NÚMEROS QUE IMPACTAM
   Os valores sobem de 0 até o alvo quando entram na tela (ver BLOCO 3).
   ========================================================================== */

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

@media (min-width: 1000px) {
  #ts-midiakit-wrapper .ts-stats { grid-template-columns: repeat(5, 1fr); }
}

/* São 5 métricas em 2 colunas: a última sobraria sozinha, deixando um
   buraco cinza ao lado. Esticá-la pelas duas colunas fecha a grade. */
@media (max-width: 999px) {
  #ts-midiakit-wrapper .ts-stat:last-child { grid-column: 1 / -1; }
}

/* 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) {
  #ts-midiakit-wrapper .ts-numbers .ts-container { text-align: center; }
  #ts-midiakit-wrapper .ts-numbers .ts-eyebrow { justify-content: center; }
}

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

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

#ts-midiakit-wrapper .ts-stat__value {
  font-size: clamp(1.55rem, 3.4vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ts-accent);
  white-space: nowrap;
}

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


/* ==========================================================================
   10. SEÇÃO 8 — PALESTRAS, MENTORIAS E IMERSÕES
   ========================================================================== */

#ts-midiakit-wrapper .ts-formats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ts-line);
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-radius);
  overflow: hidden;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 900px) {
  #ts-midiakit-wrapper .ts-formats { grid-template-columns: repeat(3, 1fr); }
}

#ts-midiakit-wrapper .ts-format {
  position: relative;
  padding: clamp(1.9rem, 3.5vw, 2.6rem) clamp(1.5rem, 2.5vw, 2rem);
  background: var(--ts-bg);
  transition: background-color .35s ease;
}

#ts-midiakit-wrapper .ts-format:hover { background: var(--ts-bg-card); }

/* Numeração grande e translúcida ao fundo do card. */
#ts-midiakit-wrapper .ts-format__index {
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,193,7,.42);
  margin-bottom: 1.1rem;
  transition: color .4s ease;
}

#ts-midiakit-wrapper .ts-format:hover .ts-format__index { color: rgba(255,193,7,.14); }

#ts-midiakit-wrapper .ts-format h3 {
  font-size: var(--ts-h3);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: .75rem;
}

#ts-midiakit-wrapper .ts-format p {
  font-size: .9rem;
  color: var(--ts-muted);
  line-height: 1.62;
}

/* Banner da seção de palestras. */
#ts-midiakit-wrapper .ts-speak__banner {
  position: relative;
  border-radius: var(--ts-radius);
  overflow: hidden;
  border: 1px solid var(--ts-line);
  aspect-ratio: 21 / 9;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* Sem filtro e sem véu escuro: as fotos aparecem com a cor original.
   Não há texto sobreposto aqui, então nada precisa ser escurecido. */


/* ==========================================================================
   11. SEÇÃO 9 — PROVA SOCIAL & IMPRENSA
   ========================================================================== */

#ts-midiakit-wrapper .ts-reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 850px) {
  #ts-midiakit-wrapper .ts-reviews { grid-template-columns: repeat(3, 1fr); }
}

#ts-midiakit-wrapper .ts-review {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.7rem;
  background: var(--ts-bg-card);
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-radius);
  transition: transform .35s ease, border-color .35s ease;
}

#ts-midiakit-wrapper .ts-review:hover {
  transform: translateY(-6px);
  border-color: rgba(255,193,7,.28);
}

#ts-midiakit-wrapper .ts-review__stars {
  color: var(--ts-accent);
  font-size: 1rem;
  letter-spacing: .18em;
  margin-bottom: 1.2rem;
}

#ts-midiakit-wrapper .ts-review p {
  font-size: .95rem;
  font-style: italic;
  line-height: 1.65;
  flex: 1;
}

#ts-midiakit-wrapper .ts-review cite {
  display: block;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ts-line);
  font-style: normal;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ts-accent);
}

/* ==========================================================================
   12. SEÇÃO 10 — FOOTER / CHAMADA FINAL
   ========================================================================== */

#ts-midiakit-wrapper .ts-cta {
  position: relative;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--ts-line);
}

#ts-midiakit-wrapper .ts-cta::before {
  content: '';
  position: absolute;
  bottom: -55%;
  left: 50%;
  transform: translateX(-50%);
  width: 120vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 100%, rgba(255,193,7,.16), transparent 58%);
  pointer-events: none;
  z-index: 0;
}

#ts-midiakit-wrapper .ts-cta .ts-container {
  position: relative;
  z-index: 2;
}

#ts-midiakit-wrapper .ts-cta .ts-eyebrow { justify-content: center; }

#ts-midiakit-wrapper .ts-cta__title {
  font-size: clamp(1.8rem, 4.2vw, 3.3rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 20ch;
  margin-inline: auto;
}

#ts-midiakit-wrapper .ts-cta__title > span:not(.ts-char):not(.ts-caret) {
  color: var(--ts-accent);
}

#ts-midiakit-wrapper .ts-cta__text {
  margin: 1.6rem auto 0;
  max-width: 62ch;
  color: var(--ts-muted);
  font-size: var(--ts-body);
}

#ts-midiakit-wrapper .ts-cta .ts-btn-row { justify-content: center; }

/* --- Redes sociais ------------------------------------------------------ */

#ts-midiakit-wrapper .ts-social {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ts-line);
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-radius);
  overflow: hidden;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  text-align: left;
}

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

#ts-midiakit-wrapper .ts-social__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.6rem;
  background: var(--ts-bg);
  transition: background-color .35s ease;
}

#ts-midiakit-wrapper .ts-social__item:hover { background: var(--ts-bg-card); }

#ts-midiakit-wrapper .ts-social__label {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ts-muted);
  margin-bottom: .35rem;
}

#ts-midiakit-wrapper .ts-social__handle {
  font-size: .95rem;
  font-weight: 700;
}

#ts-midiakit-wrapper .ts-social__item:hover .ts-social__handle { color: var(--ts-accent); }

#ts-midiakit-wrapper .ts-social__arrow {
  flex: none;
  font-size: 1.05rem;
  color: var(--ts-accent);
  transition: transform .35s ease;
}

#ts-midiakit-wrapper .ts-social__item:hover .ts-social__arrow { transform: translate(4px, -4px); }

#ts-midiakit-wrapper .ts-footnote {
  margin-top: 2.8rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ts-muted);
  opacity: .6;
}


/* ==========================================================================
   12.1 SLIDESHOW DE BANNER (crossfade automático)

   Usado nos banners do ECOSSISTEMA (3 fotos) e de PALESTRAS (2 fotos).
   As imagens ficam empilhadas no mesmo espaço e só a ativa tem opacidade.
   O JS alterna a classe .is-active a cada 5s (constante SLIDE_INTERVAL).

   Para adicionar ou remover uma foto, basta acrescentar/apagar uma <img
   class="ts-slide"> dentro do banner no BLOCO 2 — o JS conta sozinho.
   ========================================================================== */

#ts-midiakit-wrapper .ts-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

/* A primeira já nasce visível, assim não há "piscada" antes do JS rodar. */
#ts-midiakit-wrapper .ts-slide:first-child,
#ts-midiakit-wrapper .ts-slide.is-active { opacity: 1; }

/* Quando o JS assume, quem manda é só a classe .is-active. */
#ts-midiakit-wrapper.ts-js .ts-slide:first-child:not(.is-active) { opacity: 0; }

/* Pontinhos indicadores no canto do banner. */
#ts-midiakit-wrapper .ts-slide-dots {
  position: absolute;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 3;
  display: flex;
  gap: .45rem;
}

#ts-midiakit-wrapper .ts-slide-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transition: background-color .5s ease, transform .5s ease;
}

#ts-midiakit-wrapper .ts-slide-dot.is-active {
  background: var(--ts-accent);
  transform: scale(1.3);
}


/* ==========================================================================
   13. ANIMAÇÃO DE ENTRADA (scroll reveal)
   O JS adiciona .is-visible quando o elemento entra na viewport.
   O estado inicial só é aplicado quando a classe .ts-js está presente —
   assim, se o JS não rodar, o conteúdo aparece normalmente.
   ========================================================================== */

#ts-midiakit-wrapper.ts-js .ts-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1),
              transform .7s cubic-bezier(.2,.7,.3,1);
}

#ts-midiakit-wrapper.ts-js .ts-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Atrasos em cascata para grids (aplicados via data-delay no HTML). */
#ts-midiakit-wrapper .ts-reveal[data-delay="1"] { transition-delay: .1s; }
#ts-midiakit-wrapper .ts-reveal[data-delay="2"] { transition-delay: .2s; }
#ts-midiakit-wrapper .ts-reveal[data-delay="3"] { transition-delay: .3s; }
#ts-midiakit-wrapper .ts-reveal[data-delay="4"] { transition-delay: .4s; }


/* ==========================================================================
   13.1 EFEITO MÁQUINA DE ESCREVER (títulos)

   O JS quebra o texto dos títulos em um span por caractere e escalona o
   transition-delay de cada um. Como TODOS os caracteres já ocupam seu
   lugar desde o início (só a tinta é que aparece), o texto é "escrito"
   sem nenhum pulo de layout — que é o defeito clássico do typewriter
   feito apagando e reescrevendo o conteúdo.

   Para desligar em um título específico: data-no-typewriter="" na tag.
   Para mudar a velocidade: constante TYPE_SPEED, no BLOCO 3.
   ========================================================================== */

/* display e color explícitos são uma trava de segurança: o caractere é
   apenas "tinta", precisa fluir inline e herdar a cor de quem o contém. */
#ts-midiakit-wrapper span.ts-char {
  display: inline;
  color: inherit;
  opacity: 0;
  transition: opacity .01s linear;   /* liga/desliga seco, como uma tecla */
}

#ts-midiakit-wrapper .is-typed .ts-char { opacity: 1; }

/* Cursor piscante, presente só enquanto a linha está sendo digitada. */
#ts-midiakit-wrapper span.ts-caret {
  display: inline-block;
  width: .06em;
  min-width: 2px;
  height: .82em;
  margin-left: .06em;
  vertical-align: baseline;
  background: var(--ts-accent);
  opacity: 0;
}

#ts-midiakit-wrapper .is-typing .ts-caret {
  opacity: 1;
  animation: ts-caret-blink .75s steps(1, end) infinite;
}

@keyframes ts-caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}


/* ==========================================================================
   14. ACESSIBILIDADE — respeita "reduzir movimento" do sistema
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #ts-midiakit-wrapper *,
  #ts-midiakit-wrapper *::before,
  #ts-midiakit-wrapper *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  #ts-midiakit-wrapper.ts-js .ts-reveal { opacity: 1; transform: none; }
  #ts-midiakit-wrapper .ts-clients__track { animation: none; }
  #ts-midiakit-wrapper span.ts-char { opacity: 1; }
  #ts-midiakit-wrapper span.ts-caret { display: none; }
}/* End custom CSS */