/* =============================================================
   Dito Blocks — estilos do que o Elementor não expressa
   -------------------------------------------------------------
   Só entra aqui o que é gerado por PHP (os chips de filtro) ou o
   que nenhum controle de container alcança. Tudo o mais mora no
   bloco, editável pelo cliente.

   As cores vêm das variáveis GLOBAIS do kit, não de valores
   fixos: assim trocar a paleta em Site Settings continua valendo
   para os chips também. Os literais depois da vírgula são só
   fallback para quando o kit ainda não foi importado.

   Medidas conferidas contra o Figma (nó 152:70):
     chip     altura 38 · padding 8/16 · pill · texto 14px/500
     ativo    fundo #222f51 · texto #ffffff
     inativo  fundo #ffffff · texto #19223c
     entre chips: gap 8
   ============================================================= */

/* ═════════════════════════════════════════════════════════════
   BLINDAGEM CONTRA O RESET DO TEMA — tem que ser a primeira regra
   -------------------------------------------------------------
   O Hello Elementor pinta TODO link E TODO botão:

     a                        { color: #c36 }   ← rosa-avermelhado
     a:hover, a:active        { color: #336 }
     button                   { border: 1px solid #c36; color: #c36;
                                padding: .5rem 1rem }
     button:hover, :focus     { background-color: #c36; color: #fff }

   São QUATRO propriedades, e cada uma me pegou de surpresa em uma
   rodada diferente. `color` foi a primeira; o `background-color` do
   hover pintava o botão de rosa; a `border` deixava um contorno que
   ninguém desenhou; e o `padding` era o mais traiçoeiro de todos:
   num botão redondo de 40px ele deixa 8px de caixa de conteúdo e
   ESPREME o ícone lá dentro. O sintoma é "o ícone sumiu", e nada no
   CSS do ícone está errado — dá para passar horas mexendo no
   tamanho do SVG sem chegar perto da causa.

   `button:hover` tem especificidade (0,1,1) e ganha de qualquer
   regra de classe simples como `.dito-slide__play` (0,1,0). O HTML
   que este plugin gera não tem o CSS por elemento do Elementor
   protegendo, então o tema decidia cor, fundo e borda dos meus
   botões no hover. E o tema do cliente pode ter um reset pior.

   A regra abaixo devolve a decisão para cá SEM sequestrar nada:

   - `:where()` não conta para a especificidade, então cada seletor
     vale exatamente o que o do tema vale — (0,0,1) para `a` e
     (0,1,1) para `a:hover`. Empate de especificidade se resolve
     por ordem, e o CSS do plugin carrega depois do tema.
   - Empatando com o tema e perdendo para as regras de componente
     mais abaixo neste arquivo, qualquer `.dito-*` que declare cor
     própria continua mandando. O padrão passa a ser `inherit`, ou
     seja: a cor vem do container do Elementor, que é onde o
     cliente edita.
   - O seletor de atributo pega `dito-` qualquer, então componente
     novo nasce protegido em vez de precisar ser lembrado.

   CONTRATO que isto cria, e que vale para componente novo:
   quem quiser fundo, borda ou cor NO HOVER precisa declarar no
   `:hover` — porque a blindagem do hover está em (0,1,1) e uma
   regra de classe pura (0,1,0) perde para ela. Não é burocracia:
   declarar o estado é como se escreve isso de qualquer forma, e é
   o que impede o tema de preencher a lacuna.

   Se um dia um botão do plugin aparecer rosa, é porque ele está
   fora de um elemento `.dito-*` — a correção é a classe, não uma
   exceção aqui.
   ═════════════════════════════════════════════════════════════ */

:where([class^="dito-"], [class*=" dito-"]) a,
:where([class^="dito-"], [class*=" dito-"]) button,
a:where([class^="dito-"], [class*=" dito-"]),
button:where([class^="dito-"], [class*=" dito-"]) {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  border-color: transparent;
}

/* O padding precisa de uma regra SEPARADA, em (0,1,0).
   -------------------------------------------------------------
   Os botões saem daqui como `<button type="button">`, e o reset do tema
   os alcança por `[type=button]`. Seletor de atributo pesa como classe:
   (0,1,0). A blindagem acima está em (0,0,1) — `:where()` não conta e
   `button` é elemento — e portanto PERDE.

   O efeito é o padding de `.5rem 1rem` sobreviver: num botão redondo de
   40px sobram 8px de caixa e o ícone é espremido de 18px para 6. Eu já
   tinha corrigido isso com `padding: 0` no próprio `.dito-seta`, que é
   (0,1,0) e ganhava por ordem — e quebrei de novo ao mover a
   declaração para a blindagem, achando que estava generalizando.

   Um seletor só de atributo empata com o do tema e vence por ordem, e
   continua perdendo para as regras de componente mais abaixo, que
   também estão em (0,1,0). É a mesma mecânica do resto da blindagem. */
/* O qualificador de elemento vai dentro de `:where()`, e isso não é
   estilo — é o que mantém a conta de especificidade acima válida.
   -------------------------------------------------------------
   Escrito sem qualificador nenhum, este seletor casava QUALQUER
   elemento com uma classe `dito-`, container incluído. Ficou inócuo
   enquanto só componentes carregavam essas classes. Quebrou no dia em
   que o `dito-anima.js` passou a adicionar `dito-anima` aos
   containers do Elementor para animar a entrada: `[class*=" dito-"]`
   passou a casar, e todo card da página perdeu o padding interno —
   mas só DEPOIS que o JS rodava, o que no site com "delay JavaScript"
   do WP Rocket acontece na primeira interação do visitante. A página
   carregava certa e se desmontava sozinha um segundo depois.

   `:where()` pesa zero, então o par continua em (0,1,0): empata com o
   `[type=button]` do tema e vence por ordem, e continua perdendo para
   as regras de componente mais abaixo. A conta é a mesma; o alcance é
   que deixou de pegar quem nunca foi alvo.

   Sexta vez que esta blindagem apaga o próprio componente. Guardado
   por: bin/blindagem.py, que recusa seletor de blindagem capaz de
   casar um container. */
:where(button, [type="button"], [type="submit"])[class^="dito-"],
:where(button, [type="button"], [type="submit"])[class*=" dito-"] {
  padding: 0;
}

:where([class^="dito-"], [class*=" dito-"]) a:link,
:where([class^="dito-"], [class*=" dito-"]) a:visited,
:where([class^="dito-"], [class*=" dito-"]) a:hover,
:where([class^="dito-"], [class*=" dito-"]) a:focus,
:where([class^="dito-"], [class*=" dito-"]) a:active,
:where([class^="dito-"], [class*=" dito-"]) button:hover,
:where([class^="dito-"], [class*=" dito-"]) button:focus,
:where([class^="dito-"], [class*=" dito-"]) button:active,
a:where([class^="dito-"], [class*=" dito-"]):link,
a:where([class^="dito-"], [class*=" dito-"]):visited,
a:where([class^="dito-"], [class*=" dito-"]):hover,
a:where([class^="dito-"], [class*=" dito-"]):focus,
a:where([class^="dito-"], [class*=" dito-"]):active,
button:where([class^="dito-"], [class*=" dito-"]):hover,
button:where([class^="dito-"], [class*=" dito-"]):focus,
button:where([class^="dito-"], [class*=" dito-"]):active {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  border-color: transparent;
}

.dito-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Fundo e borda nos quatro estados, pelo contrato da blindagem: o
   `:active` faltava aqui e o chip ficava transparente enquanto o
   botão do mouse estava pressionado. */
.dito-chip,
.dito-chip:hover,
.dito-chip:focus,
.dito-chip:active {
  border: 0;
  background: var(--e-global-color-background_white, #ffffff);
}

.dito-chip {
  appearance: none;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;

  color: var(--e-global-color-text_on_light, #19223c);

  transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0, 0, 0.2, 1),
              color 150ms cubic-bezier(0, 0, 0.2, 1);
}

/* Cor fixada em TODOS os estados.
   O chip é HTML do plugin, não widget: não tem o CSS por elemento do
   Elementor protegendo, então qualquer regra de `button` ou de link do
   tema o atinge. Era daí que vinha o vermelho no clique e o texto
   sumindo no hover. */
.dito-chip,
.dito-chip:link,
.dito-chip:visited,
.dito-chip:hover,
.dito-chip:focus,
.dito-chip:active {
  color: var(--e-global-color-text_on_light, #19223c);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* O hover NÃO muda o fundo: a faixa de filtros é `#eceef1`, a mesma
   cor de `background_light`, então escurecer o chip para lá o fazia
   sumir dentro da faixa. Trocar branco por essa cor só inverteu o
   problema original ("o hover deixa a pill toda branca").

   O anel interno resolve os dois: `inset` não ocupa espaço, então o
   chip não muda de tamanho e não empurra a linha, e `border_strong`
   contrasta tanto com o branco do chip quanto com a faixa atrás. */
.dito-chip:hover,
.dito-chip:focus {
  box-shadow: inset 0 0 0 1px var(--e-global-color-border_strong, #a2a9b8);
}

/* O chip selecionado já é navy sólido — o anel só sujaria a borda. */
.dito-chip.is-ativo:hover,
.dito-chip.is-ativo:focus {
  box-shadow: none;
}

.dito-chip.is-ativo,
.dito-chip.is-ativo:link,
.dito-chip.is-ativo:visited,
.dito-chip.is-ativo:hover,
.dito-chip.is-ativo:focus,
.dito-chip.is-ativo:active {
  background: var(--e-global-color-text_on_primary, #222f51);
  color: var(--e-global-color-background_white, #ffffff);
}

/* Foco visível é requisito de teclado, não enfeite. `:focus-visible`
   mostra o anel para quem navega por Tab sem poluir o clique de mouse. */
.dito-chip:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #39c881);
  outline-offset: 2px;
}

/* ── Grade de cases ───────────────────────────────────────────
   O container do Elementor arruma os WIDGETS dele; os cards ficam
   dentro do widget de shortcode, fora do alcance daquele flex. Sem
   a grade aqui, os cards empilham em largura cheia — que foi
   exatamente o que aconteceu.
   Figma: 3 colunas · gap 24 · card 360px               */
.dito-cases {
  display: grid;
  /* `minmax(0, 1fr)`, nunca `1fr` seco.
     -------------------------------------------------------------
     `1fr` é `minmax(auto, 1fr)`, e esse `auto` é a LARGURA MÍNIMA DE
     CONTEÚDO do card: qualquer coisa lá dentro que não encolha vira
     piso da coluna, e a grade passa a ser mais larga que a página em
     vez de apertar os cards. É rolagem horizontal, não layout torto —
     não aparece em captura de tela, só medindo.

     Já aconteceu por três motivos diferentes (padding de seção no
     card, largura fixa de parágrafo, HUG na linha que envolve a
     grade). Cada um foi corrigido na origem, mas a garantia tem que
     morar aqui: a coluna nunca pede mais do que a fração dela. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  /* Item de grade já estica dentro da linha dele, mas cada linha ganha
     a própria altura. Com mais de 3 cases isso faria a segunda linha
     ter cards de outro tamanho. `1fr` iguala TODAS as linhas. */
  grid-auto-rows: 1fr;
}

/* Duas colunas já abaixo de 1200px, e não de 1024px.
   O card do Figma tem 360px. Com 3 colunas numa tela de 1100px ele cai
   para 267px, e a linha do topo (logo 88 + gap 12 + badge "Home &
   Eletro" ~110) deixa de caber — o badge vazava para fora do card. O
   limite é a largura mínima em que a linha ainda cabe, não um número
   redondo qualquer. */
@media (max-width: 1199px) {
  .dito-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .dito-cases { grid-template-columns: minmax(0, 1fr); }
}

/* Cards SEMPRE do mesmo tamanho, qualquer que seja o texto.
   -------------------------------------------------------------
   Item de grade já estica por padrão, mas quem estica é só o
   envelope do filtro. Dentro dele vem o wrapper do template e só
   então o card de verdade — e cada camada precisa repassar a
   altura, senão o envelope fica alto e o card branco fica do
   tamanho do próprio texto. Era o que deixava um card mais curto
   que o outro.

   A corrente:  grade → .dito-case → .elementor → .e-con         */
.dito-case {
  display: flex;
}

.dito-case > .elementor,
.dito-case > * {
  display: flex;
  width: 100%;
}

.dito-case > .elementor > .e-con,
.dito-case > * > .e-con {
  flex: 1;
}

/* O "Ver case" desce para o rodapé — e SÓ ele.
   -------------------------------------------------------------
   A versão anterior mirava `.e-con > :last-child`, contando que o
   último filho fosse o CTA. Não é: o `.e-con` externo tem um filho
   só, o container que embrulha o card INTEIRO. O `margin-top: auto`
   caía nele e empurrava tudo — logo, badge, número, texto — para o
   rodapé. Como a sobra depende do tamanho da descrição, cada card
   descia um tanto diferente, e os logos apareciam em alturas
   diferentes. O sintoma parecia "logo desalinhado" e era o card
   inteiro ancorado embaixo.

   Mirar no elemento que CONTÉM o link, em vez de contar posição na
   árvore, torna a regra imune à profundidade — que muda toda vez
   que o gerador acha um wrapper a mais ou a menos para achatar. */
.dito-case .elementor-widget-shortcode:has(> .elementor-widget-container .dito-case__link) {
  margin-top: auto;
}

/* Para o `auto` ter espaço de onde tirar, toda camada entre o card e
   o CTA precisa crescer. Sem isto o conteúdo termina onde termina e
   não sobra folga nenhuma para empurrar. */
.dito-case .e-con:has(.dito-case__link),
.dito-case .e-con-inner:has(.dito-case__link) {
  flex: 1 1 auto;
}

/* Um case escondido pelo filtro sai do fluxo E da ordem de leitura:
   `display: none` já tira dos leitores de tela. */
.dito-case--oculto {
  display: none !important;
}

/* Case além da primeira leva, escondido até o "Mostrar mais". A classe
   sai no clique; o filtro usa a outra, para os dois não brigarem. */
.dito-case--extra {
  display: none;
}

.dito-cases--tudo-visivel .dito-case--extra {
  display: flex;
}

/* ── Tags de produto ──────────────────────────────────────────
   Figma: padding 4/10 · raio 12 · fundo #eceef1 · gap 6 · 12px/500 */
/* ═════════════════════════════════════════════════════════════
   LIGHTBOX — vídeo de terceiro abre por cima da página
   -------------------------------------------------------------
   O véu escuro não é enfeite: ele tira a página da disputa. Um vídeo
   de 20 minutos dentro de um card de 607px, com dois vizinhos ao lado
   e a página rolando atrás, é pior do que a mesma coisa sozinha na
   tela.

   `position: fixed` e não `absolute`: o lightbox tem que ignorar
   qualquer `transform` de ancestral — e este carrossel é feito de
   `transform`, que cria contexto de posicionamento e prenderia o
   diálogo dentro do slide.
   ═════════════════════════════════════════════════════════════ */

.dito-lightbox {
  position: fixed;
  inset: 0;
  /* Acima do cabeçalho fixo do site. */
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.dito-lightbox__fundo {
  position: absolute;
  inset: 0;
  background: rgba(13, 28, 66, 0.88);
  backdrop-filter: blur(6px);
  animation: dito-lightbox-entra 180ms var(--curva);
}

.dito-lightbox__palco {
  position: relative;
  width: 100%;
  /* 16:9 dentro do que couber, sem passar da tela em nenhum dos dois
     eixos: `min()` resolve os dois limites de uma vez. */
  max-width: min(1120px, calc((100vh - 140px) * 16 / 9));
  animation: dito-lightbox-sobe 220ms var(--curva);
}

.dito-lightbox__moldura {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000000;
}

.dito-lightbox__moldura .dito-slide__video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* O véu do slide não vale aqui: dentro do lightbox o player é o
     conteúdo, não uma camada que aparece depois. */
  opacity: 1;
}

.dito-lightbox__fechar {
  position: absolute;
  top: -48px;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.dito-lightbox__fechar::before,
.dito-lightbox__fechar::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 2px;
  background: #ffffff;
}

.dito-lightbox__fechar::before {
  transform: rotate(45deg);
}

.dito-lightbox__fechar::after {
  transform: rotate(-45deg);
}

.dito-lightbox__fechar:hover {
  background: rgba(255, 255, 255, 0.24);
}

.dito-lightbox__fechar:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #39c881);
  outline-offset: 3px;
}

@keyframes dito-lightbox-entra {
  from {
    opacity: 0;
  }
}

@keyframes dito-lightbox-sobe {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* Tela baixa: o botão de fechar não cabe acima da moldura. */
@media (max-height: 520px), (max-width: 599px) {
  .dito-lightbox {
    padding: 12px;
  }

  .dito-lightbox__fechar {
    top: 8px;
    right: 8px;
    background: rgba(13, 28, 66, 0.72);
  }
}

/* ═════════════════════════════════════════════════════════════
   RÉGUA DE LOGOS — vira carrossel quando passa de cinco
   -------------------------------------------------------------
   Só entra em cena quando o JS marca a fileira: até cinco marcas ela
   fica parada, como o desenho pede. Acima disso o conteúdo é duplicado
   e a fileira desliza em laço.

   `-50%` porque a segunda metade é cópia da primeira: ao chegar lá, o
   quadro é idêntico ao inicial e o reinício não tem emenda.

   `width: max-content` e `flex-wrap: nowrap` são o que impedem a
   fileira de quebrar — o container do Elementor vem com `wrap`, e sem
   isto a cópia desceria para uma segunda linha em vez de continuar a
   régua.
   ═════════════════════════════════════════════════════════════ */

/* A régua já nasce em LINHA, antes de o JS chegar.
   ───────────────────────────────────────────────────────────────
   `.dito-regua` é adicionada por JS, e com o delay do WP Rocket isso
   acontece na primeira interação do visitante. Até lá o container é uma
   fileira flex comum do Elementor, com `wrap`: os oito logos quebram em
   DUAS linhas. Quando a classe chega, a fileira vira uma linha só e a
   seção encolhe — o conteúdo abaixo sobe sob o leitor.

   Medido na página publicada: 0,0182 de CLS num salto só, aos 7,6s, que
   é quando o JS assume. A métrica fica dentro do "bom" (<0,1) e mente
   sobre o incômodo: o que se vê é a régua em duas linhas e depois um
   pulo.

   O reconhecimento aqui é o mesmo que o JS faz, no que o CSS alcança:
   uma fileira cujo PRIMEIRO e o ÚLTIMO filhos são logos. Uma seção que
   por acaso contém um logo no meio de outras coisas não casa. Depois
   que o JS duplica, o último filho é uma cópia — que também é logo, e o
   seletor segue valendo.

   Só a GEOMETRIA vem para cá. A animação continua na `.dito-regua`, que
   só existe depois do JS: ela translada -50% contando com a cópia, e
   começar antes de a cópia existir deixaria metade da régua vazia. */
body.dito-estatica .e-con:has(> .elementor-widget-image:first-child img[src*="/logo-"]):has(> .elementor-widget-image:last-child img[src*="/logo-"]) {
  flex-wrap: nowrap;
  /* Recorta em si mesma, e NÃO usa `width: max-content` como a
     `.dito-regua`.

     Depois do JS quem recorta é o pai, porque a fileira precisa ser mais
     larga que a coluna para deslizar. Antes do JS não há deslize: se ela
     crescer para `max-content` sem alguém recortando, os oito logos
     vazam por cima do mockup ao lado. Ficando na largura da coluna e
     cortando em si, o primeiro frame mostra as mesmas cinco marcas que
     o estado final — que é o ponto. */
  overflow: hidden;
}

/* Os logos não encolhem para caber: item de flex tem `min-width: auto` e,
   sem isto, `nowrap` espremeria os oito dentro da coluna em vez de
   deixar os últimos saírem de quadro. */
body.dito-estatica .e-con:has(> .elementor-widget-image:first-child img[src*="/logo-"]):has(> .elementor-widget-image:last-child img[src*="/logo-"]) > .elementor-widget-image {
  flex: 0 0 auto;
}

.dito-regua {
  /* Linha, sempre. A régua é um carrossel horizontal por definição, e a
     regra que vira linha em coluna no celular não sabe disso — ela veria
     oito logos lado a lado e empilharia os oito, matando o laço. */
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  animation: dito-regua-desliza var(--dito-regua-duracao, 24s) linear infinite;
}

/* O pai recorta: a régua é mais larga que a coluna de propósito. */
/* stylelint-disable-next-line no-duplicate-selectors -- o bloco acima é a mecânica do deslize; este é o recorte do pai */
.dito-regua {
  will-change: transform;
}

.e-con:has(> .dito-regua),
.dito-regua {
  overflow: hidden;
}

/* Parar no hover é cortesia com quem está tentando ler uma marca. */
.dito-regua:hover {
  animation-play-state: paused;
}

@keyframes dito-regua-desliza {
  to {
    transform: translateX(-50%);
  }
}

/* Sem movimento: a régua fica parada e mostra as primeiras marcas.
   A cópia sai de cena para não repetir logo em seguida. */
@media (prefers-reduced-motion: reduce) {
  .dito-regua {
    animation: none;
  }

  .dito-regua__copia {
    display: none;
  }
}

/* Rótulo de componente: pílula, etiqueta, chip, botão.
   -------------------------------------------------------------
   A classe é emitida pelo GERADOR em todo texto que vive dentro de um
   componente atômico do Figma (HUG e baixo). Esses textos são RÓTULO,
   não parágrafo — quebrar linha neles não adapta nada, deforma: o
   "Resultados reais do varejo" do hero virava duas linhas e a pílula
   dobrava de altura, de 28px para 44px, por 6px que faltavam na
   medida do texto. */
.dito-rotulo,
.dito-rotulo .elementor-heading-title {
  white-space: nowrap;
}

/* Texto de bloco gerado: sem a margem que o tema dá ao último parágrafo.

   O Hello Elementor põe `margin-bottom: 0.8em` em todo `<p>`. Depois do
   ÚLTIMO parágrafo isso é espaço morto entre o texto e a borda do
   widget — 14,4px que o Figma não pede, porque lá o respiro até o
   próximo elemento é o gap do auto-layout. Somados, o subtítulo do hero
   se despedia do botão com 54px onde o desenho pede 40.

   Só o último: a separação ENTRE parágrafos é do tema e continua certa.
   `!important` porque a regra do tema é `.elementor p` e vence por
   especificidade de origem, não de seletor. */
.dito-texto > .elementor-widget-container > p:last-child,
.dito-texto > p:last-child {
  margin-block-end: 0 !important;
}

/* Imagem de bloco gerado: bloco, não inline.

   Inline, ela vive numa caixa de linha, e caixa de linha tem strut — a
   altura é a maior entre a da imagem e o `line-height` herdado. Uma
   imagem menor que a linha ocupa a linha inteira: o ícone de 11px do
   chip "Dito IA" media 26, e o chip ia de 32 para 42px.

   É o mesmo motivo pelo qual o `_label` nasce como `div` e não `<p>`. */
.dito-imagem img {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   "O contraste de relance": três dores, um painel por vez
   ───────────────────────────────────────────────────────────────
   Os três painéis estão no HTML. Aqui só se decide qual aparece.

   O painel 1 é o estado que o Figma desenha, e é ele que fica de pé
   quando o JS não roda: esconder os três e deixar o script revelar
   deixaria a coluna vazia se algo falhasse. Por isso o CSS esconde
   apenas o 2 e o 3, e as classes do JS têm especificidade maior
   (id + classe) para mandar nos dois sentidos depois.
   ═════════════════════════════════════════════════════════════ */
#dito-solucao-2,
#dito-solucao-3 {
  display: none;
}

#dito-solucao .dito-painel--ativo {
  display: flex;
}

#dito-solucao .dito-painel--inativo {
  display: none;
}

/* Só vira clicável quando o JS assumiu: sem ele, mão de ponteiro num
   card que não responde é promessa falsa. */
.dito-solucao--ligado ~ * [role="tab"],
[role="tab"] {
  cursor: pointer;
}

/* Os dois estados do card, com os valores do DESENHO nos dois lados.

   Nunca um neutro: blindagem que declara "sem borda" no estado inativo
   apagaria a borda cinza de 1px que o desenho pede — foi assim que
   componentes já perderam o próprio estado neste projeto. Aqui cada
   lado diz exatamente o que o Figma diz. */
.dito-dor--ativa {
  background-color: #fef5f5 !important;
  border-style: solid !important;
  border-color: #b91c1c !important;
  border-width: 2px !important;
}

.dito-dor--inativa {
  background-color: #f5f7fb !important;
  border-style: solid !important;
  border-color: #e5e7eb !important;
  border-width: 1px !important;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

/* O estado muda SEIS coisas no card, e não só o fundo.

   O Figma desenhou os três estados, e comparando-os: fundo, borda, o
   ponto, o título, a etiqueta "Dor #N" e o corpo do texto. Trocar só o
   fundo deixaria o card meio selecionado — a etiqueta continuaria
   vermelha no card errado.

   O ponto vira CSS porque no desenho ele é um círculo de 8px exportado
   como PNG, e PNG não muda de cor. Desenhá-lo aqui é o que permite ele
   acompanhar o estado; o `img` fica no HTML, só invisível, para não
   mexer na caixa que o layout já reservou. */
[role="tab"] .elementor-widget-image img {
  visibility: hidden;
}

[role="tab"] .elementor-widget-image .elementor-widget-container {
  position: relative;
}

[role="tab"] .elementor-widget-image .elementor-widget-container::after {
  /* Tamanho fixo e centrado, nunca `inset: 0`.

     O container do widget acompanha a altura da linha, que é a do
     título ao lado — bem mais que os 8px do ícone. Esticado nele, o
     círculo virava uma elipse alta. */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #8d95a7;
}

.dito-dor--ativa .elementor-widget-image .elementor-widget-container::after {
  background: #b91c1c;
}

/* Título: o selecionado é um grau mais escuro. */
.dito-dor--ativa h6 {
  color: #1f2124 !important;
}

.dito-dor--inativa h6 {
  color: #404040 !important;
}

/* Etiqueta "Dor #N" — filha direta da linha do topo, o que a separa do
   título, que mora um nível mais fundo, dentro da Title-row. */
.dito-dor--ativa > .e-con > .elementor-widget-heading .elementor-heading-title {
  color: #b91c1c !important;
}

.dito-dor--inativa > .e-con > .elementor-widget-heading .elementor-heading-title {
  color: #8d95a7 !important;
}

.dito-dor--ativa > .elementor-widget-text-editor p {
  color: #404040 !important;
}

.dito-dor--inativa > .elementor-widget-text-editor p {
  color: #6a7486 !important;
}

[role="tab"]:focus-visible {
  outline: 2px solid #0d1b3d;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .dito-dor--ativa,
  .dito-dor--inativa {
    transition: background-color 180ms ease, border-color 180ms ease;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Quebra de linha dos títulos
   ───────────────────────────────────────────────────────────────
   O Figma quebra o título na largura da caixa DELE (940px). Na
   página, com outra largura, a quebra natural cai em outro lugar — e
   caiu no pior: "Duas cenas que você reconhece: sem a Dito x / com a
   Dito" partia a comparação ao meio, deixando o "x" pendurado no fim
   da linha. O desenho da Beleza & Saúde diz qual é a intenção: lá o
   designer pôs uma quebra explícita depois de "reconhece:", para a
   comparação ficar inteira.

   `balance` resolve isso por LARGURA, não por quebra fixa: distribui
   as linhas de forma equilibrada em qualquer viewport, em vez de
   encher a primeira e largar o resto na última. Um `<br>` fixo daria
   o mesmo resultado em 1440 e atrapalharia no celular.

   Medido nas três páginas antes de aplicar: muda 8 a 9 títulos por
   página, e toda mudança tira uma órfã de uma palavra da última linha
   ("...acaba no / caixa" vira "...que não / acaba no caixa"). Onde não
   há o que melhorar, não faz nada.

   Navegador sem suporte ignora e cai na quebra de hoje.
   ═════════════════════════════════════════════════════════════ */
body.dito-estatica .elementor-heading-title {
  text-wrap: balance;
}

/* ═══════════════════════════════════════════════════════════════
   FAQ — acordeão
   ───────────────────────────────────────────────────────────────
   O estado fechado é INICIAL, não aplicado depois pelo JS.

   Antes era o contrário — nada escondido por padrão, o JS fechava ao
   assumir — e a intenção era boa: sem JS a página fica inteira, com
   as seis respostas à vista para o buscador e para o leitor de tela.

   O que quebrou isso foi o WP Rocket, que ADIA o JS até a primeira
   interação. Não é JS ausente nem JS presente: é JS que chega tarde.
   A página renderizava com as seis abertas e, no primeiro rolar do
   visitante, cinco fechavam de uma vez — medido em produção, a seção
   encolhia 188px e a última pergunta pulava 403px para baixo. Quem
   estava lendo justamente ela via a pergunta sumir da tela.

   Fechar por CSS resolve porque o CSS já está aplicado quando o
   primeiro pixel aparece. O `<noscript>` abaixo devolve o
   comportamento antigo para quem tem JS DESLIGADO — que é o caso em
   que o fallback importa de verdade, e o único em que ele nunca vai
   ser desmentido meio segundo depois. Ver Dito_Filters::noscript_faq.

   `#dito-faq-1` fica aberto porque é assim no desenho, e é a mesma
   suposição que o JS faz ao assumir.
   ═════════════════════════════════════════════════════════════ */
/* A resposta se identifica pela CLASSE, nunca por posição nem por
   prefixo de id.

   As duas primeiras versões disto miravam
   `[id^="dito-faq-"] > .elementor-widget-text-editor`, contando que só
   os ITENS tivessem esse prefixo e que o único text-editor filho fosse
   a resposta. As duas suposições caíram: o JS batizava a linha da
   pergunta com o mesmo prefixo, e a pergunta é filha direta dela — some
   a pergunta, sobra o "+" sozinho. Aconteceu numa pergunta entre
   dezoito, a única longa o bastante para o gerador emitir <p> em vez de
   heading, e quem viu foi o cliente.

   `dito-faq__resposta` é emitida pelo gerador em TODAS as seis
   respostas, inclusive na primeira, que vem do Figma e ganha a classe
   por `classes_por_no`. Uma classe explícita não depende de disciplina
   de nomenclatura no JS nem de qual tag o texto acabou virando.
   `bin/faq.py` recusa item sem exatamente uma resposta marcada.

   A escada de especificidade continua necessária, e a ordem importa:
   só um id vence outro id. */

/* (0,1,0) — fechadas desde o primeiro pixel, antes de qualquer JS. */
.dito-faq__resposta {
  display: none;
}

/* (1,1,0) — a primeira nasce aberta, como no desenho. */
#dito-faq-1 > .dito-faq__resposta {
  display: block;
}

/* (0,3,0) — assumido o JS, abrir é NÃO ter a classe de fechado. */
.dito-faq--ligado > :not(.dito-faq--fechado) > .dito-faq__resposta {
  display: block;
}

/* (1,2,0) — é esta regra que deixa a primeira pergunta ser FECHADA
   pelo visitante: sem ela o id acima a manteria aberta para sempre. */
#dito-faq-1.dito-faq--fechado > .dito-faq__resposta {
  display: none;
}

[aria-controls^="dito-resposta"] {
  cursor: pointer;
  transition: opacity 160ms ease;
}

[aria-controls^="dito-resposta"]:focus-visible {
  outline: 2px solid #1f2124;
  outline-offset: 4px;
}

/* A resposta que ainda não foi escrita: itálico e um traço à esquerda,
   para ninguém confundir marcador com conteúdo aprovado. */
.dito-faq__resposta--vazia p {
  padding-left: 12px;
  border-left: 2px solid #d1d6de;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   Hover das pillar pages
   ───────────────────────────────────────────────────────────────
   Curadoria, não catálogo. Três níveis, e o critério é o que o
   elemento faz quando recebe o clique:

     RESPONDE      botão, pergunta do FAQ, card de dor — movimento
                   claro e `cursor: pointer`.
     NÃO RESPONDE  card de funcionalidade, card de dor da grade —
                   elevação de 2px e sombra, SEM cursor de mão. Dá
                   vida sem prometer uma navegação que não existe.
     ESTÁTICO      texto corrido, número, legenda — nada.

   O "Ver mais" dos cards e o "Entenda os riscos do funil cego" NÃO
   ganham hover: o Figma não deu destino a nenhum dos dois, e eles
   saem como texto, não como link. Hover ali seria falsa promessa.
   Quando os links existirem, entram na primeira lista.

   Tudo em 160-200ms: rápido o bastante para parecer resposta e não
   animação, e tudo desliga em `prefers-reduced-motion`.
   ═════════════════════════════════════════════════════════════ */

/* ── Responde ao clique ─────────────────────────────────────── */

/* O hover era `brightness(1.04)`, e clarear foi a escolha errada duas
   vezes. No botão verde ele aproxima o fundo do texto navy e o
   contraste CAI; no botão branco da faixa não faz nada visível, e o que
   sobrava era a sombra escura espalhada sobre o verde.

   Agora cada um vai para a própria cor de hover, e as duas vêm do
   design system. Contraste conferido em ambas contra o texto #0a0259:
   8,37:1 -> 6,35:1 no verde e 18:1 -> 15,5:1 no branco. As quatro
   passam AA com folga. */
body.dito-estatica .elementor-button {
  transition:
    transform 160ms var(--curva, ease),
    box-shadow 160ms var(--curva, ease),
    background-color 160ms var(--curva, ease);
}

body.dito-estatica .elementor-button:hover {
  transform: translateY(-2px);
  background-color: #2fae6f !important;
  box-shadow: 0 6px 16px rgba(47, 174, 111, 0.32);
}

/* O branco sobre a faixa verde pede o caminho inverso: escurecer o
   fundo tiraria o contraste dele com o verde em volta. Vai para o
   cinza claro do DS, e a sombra é navy porque é sobre verde que ela
   cai. */
body.dito-estatica #dito-cta-negativo .elementor-button:hover,
body.dito-estatica #dito-cta-negativo.elementor-button:hover {
  background-color: #eceef1 !important;
  box-shadow: 0 6px 18px rgba(10, 23, 50, 0.22);
}

body.dito-estatica .elementor-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(13, 27, 61, 0.16);
}

/* O hover do FAQ era `opacity: 0.68` na linha inteira. Apagar o texto
   é o gesto de DESABILITADO, não o de "clique aqui" — lia como se a
   pergunta tivesse saído do ar. Agora nada some: o sinal é o ícone, que
   assume o verde da marca e cresce um pouco. */
[aria-controls^="dito-resposta"]:hover {
  opacity: 1;
}

[aria-controls^="dito-resposta"] .elementor-widget-heading:last-child .elementor-heading-title {
  display: inline-block;
  color: #8d95a7;
  transition: color 160ms ease, transform 160ms var(--curva, ease);
}

[aria-controls^="dito-resposta"]:hover .elementor-widget-heading:last-child .elementor-heading-title,
[aria-controls^="dito-resposta"][aria-expanded="true"] .elementor-widget-heading:last-child .elementor-heading-title {
  color: #39c881;
  transform: scale(1.25);
}

.dito-dor--inativa:hover {
  border-color: #c2c7d9 !important;
  transform: translateX(3px);
}

/* ── Não responde, mas ganha vida ───────────────────────────── */

/* Os cards são marcados um a um pelo design-system, não pescados por
   estrutura.

   A primeira tentativa foi um seletor estrutural — "container filho de
   container filho de fileira". Ele pegou 87 elementos: os cards, sim,
   mas também cada chip "CDP", cada bloco de número e cada linha
   intermediária. Todos levantando 2px sob o ponteiro seria o catálogo
   que esta curadoria existe para evitar.

   Onze ids, escritos por quem olhou a página. Container do Elementor
   não aceita classe, e id é o que sobra — e aqui isso é virtude: cada
   card entra na lista porque alguém decidiu, não porque casou com um
   padrão. */
body.dito-estatica [id^="dito-card-"] {
  transition:
    transform 200ms var(--curva, ease),
    box-shadow 200ms var(--curva, ease);
}

body.dito-estatica [id^="dito-card-"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(13, 27, 61, 0.10);
}

/* Os seis cards de funcionalidade ganham um gesto próprio.

   Eles são a grade mais repetitiva da página — seis caixas iguais, com
   um selo de ícone no topo. A elevação genérica passava despercebida
   ali. Aqui a borda assume o verde da marca e o SELO cresce um pouco,
   que é o elemento que distingue um card do outro.

   Continua sem `cursor: pointer`: o card inteiro não é clicável, e o
   "Ver mais" ainda não tem destino no Figma. */
#dito-card-6,
#dito-card-7,
#dito-card-8,
#dito-card-9,
#dito-card-10,
#dito-card-11 {
  transition:
    transform 200ms var(--curva, ease),
    box-shadow 200ms var(--curva, ease),
    border-color 200ms ease;
}

#dito-card-6:hover,
#dito-card-7:hover,
#dito-card-8:hover,
#dito-card-9:hover,
#dito-card-10:hover,
#dito-card-11:hover {
  border-color: #39c881 !important;
  box-shadow: 0 10px 28px rgba(57, 200, 129, 0.16);
}

#dito-card-6 .elementor-widget-image,
#dito-card-7 .elementor-widget-image,
#dito-card-8 .elementor-widget-image,
#dito-card-9 .elementor-widget-image,
#dito-card-10 .elementor-widget-image,
#dito-card-11 .elementor-widget-image {
  transition: transform 220ms var(--curva, ease);
}

#dito-card-6:hover .elementor-widget-image,
#dito-card-7:hover .elementor-widget-image,
#dito-card-8:hover .elementor-widget-image,
#dito-card-9:hover .elementor-widget-image,
#dito-card-10:hover .elementor-widget-image,
#dito-card-11:hover .elementor-widget-image {
  transform: translateY(-3px) scale(1.08);
}

/* Logo da régua: a marca ganha nitidez sob o ponteiro, e a régua já
   pausa. Duas metades do mesmo gesto — parar e olhar. */
.dito-regua .elementor-widget-image img {
  transition: opacity 200ms ease, filter 200ms ease;
}

.dito-regua:hover .elementor-widget-image img {
  opacity: 0.55;
}

.dito-regua .elementor-widget-image:hover img {
  opacity: 1;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  body.dito-estatica .elementor-button,
  body.dito-estatica .elementor-button:hover,
  body.dito-estatica [id^="dito-card-"],
  body.dito-estatica [id^="dito-card-"]:hover,
  body.dito-estatica [id^="dito-card-"] .elementor-widget-image,
  body.dito-estatica [id^="dito-card-"]:hover .elementor-widget-image,
  [aria-controls^="dito-resposta"] .elementor-widget-heading:last-child .elementor-heading-title,
  .dito-dor--inativa,
  .dito-dor--inativa:hover,
  .dito-regua .elementor-widget-image img {
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   "O contraste de relance" no CELULAR: trilho de swipe
   ───────────────────────────────────────────────────────────────
   O frame mobile do Figma (260:8) desenha as três dores lado a lado,
   com o vizinho espiando na borda, contador "1 / 3" e bolinhas.
   Empilhadas, as três tomavam a tela inteira antes de a solução
   aparecer.

   Acima de 768px nada disto existe: o trilho vira coluna, as
   bolinhas e o contador somem, e a seção volta a ser a do desktop.
   ═════════════════════════════════════════════════════════════ */
.dito-dores-trilho {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dito-dores-bolinhas,
.dito-dores-contador {
  display: none;
}

@media (max-width: 767px) {
  .dito-dores-trilho {
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* A barra some, mas o gesto continua: é swipe, não barra. */
    scrollbar-width: none;
    /* Preso à largura do pai, e `min-width: 0` para valer.

       Item de flex tem `min-width: auto`, que é "não encolha abaixo do
       conteúdo" — com três cards dentro, o trilho media 549px num pai de
       310 e era CORTADO por ele em vez de rolar por dentro. */
    width: 100%;
    min-width: 0;
  }

  .dito-dores-trilho::-webkit-scrollbar {
    display: none;
  }

  /* `!important` porque o Elementor escreve a largura de cada container
     com a mesma especificidade desta regra e ganha na ordem do arquivo.
     O valor declarado é o do DESENHO — 268px, com o vizinho espiando na
     borda — e não um neutro. */
  .dito-dores-trilho > [role="tab"] {
    flex: 0 0 268px !important;
    width: 268px !important;
    scroll-snap-align: start;
  }

  .dito-dores-rotulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .dito-dores-contador {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #f0b4b4;
    border-radius: 999px;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
  }

  .dito-dores-bolinhas {
    display: flex;
    gap: 6px;
    /* `width: 100%` para o `center` ter o que centralizar: como item de
       uma coluna com `align-items` no começo, a fileira encolhia para os
       30px das três bolinhas e ia toda para a esquerda. */
    width: 100%;
    justify-content: center;
    padding-top: 12px;
  }

  .dito-dores-bolinhas i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d6de;
    transition: background-color 180ms ease, transform 180ms ease;
  }

  .dito-dores-bolinha--ativa {
    background: #b91c1c !important;
    transform: scale(1.34);
  }

  /* No trilho o card não desliza para o lado ao passar o dedo: ali o
     movimento é do trilho inteiro. */
  .dito-dor--inativa:hover {
    transform: none;
  }
}

/* O subtítulo tem duas redações, uma por gesto: "clique" no desktop,
   "toque" no celular. As duas vêm do Figma e ficam no BLOCO, editáveis
   — o CSS só escolhe qual aparece. */
.dito-so-mobile {
  display: none;
}

@media (max-width: 767px) {
  .dito-so-desktop {
    display: none;
  }

  .dito-so-mobile {
    display: block;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Cards de dor: a pílula ancora embaixo
   ───────────────────────────────────────────────────────────────
   Os quatro cards da grade já nascem com a mesma altura — quem os
   iguala é o `align-self: stretch` da fileira. O que desalinhava as
   pílulas era a distribuição por dentro: o card "O pós-venda que vira
   detrator público" tem uma faixa de estrelas a mais, o conteúdo dele
   é mais alto, e a pílula terminava 24px abaixo da dos vizinhos, a
   4px da borda.

   Os 4px não são erro de tradução: o Figma declara 28px de padding
   nesse card e a altura travada de 280 só deixa 4 sobrarem. O desenho
   aperta ali, e o gerador reproduziu fielmente.

   Aqui a fidelidade é abandonada de propósito, a pedido: a pílula vai
   para o fim do card com `margin-top: auto` e o respiro de baixo
   volta aos 20px dos vizinhos. As quatro passam a se alinhar sozinhas,
   qualquer que seja o tamanho do texto acima — inclusive nas outras
   duas pillar pages, onde a cópia será outra.

   Vale levar para a UX lead: no desenho, aquele card está apertado.
   ═════════════════════════════════════════════════════════════ */
#dito-card-2 > .e-con:last-child,
#dito-card-3 > .e-con:last-child,
#dito-card-4 > .e-con:last-child,
#dito-card-5 > .e-con:last-child {
  margin-top: auto;
}

/* `!important` porque o padding vem do Elementor com a especificidade
   do elemento. O valor é o dos cards vizinhos, não um neutro. */
#dito-card-3,
#dito-card-4,
#dito-card-5 {
  padding-bottom: 20px !important;
}

/* Chamada terminada em seta: a seta anda, o texto acende.

   Duas partes do mesmo gesto. A seta desliza 6px — o bastante para o
   olho ler "vai para lá" e pouco o bastante para não virar salto — e o
   texto sai do cinza mudo para o verde da marca, que é a cor de link
   do design system.

   O espaço antes da seta é `margin-left` e não um caractere: assim ele
   não muda quando a seta se move, e a frase não "respira" junto. */
.dito-chamada {
  cursor: pointer;
  transition: color 180ms ease;
}

.dito-chamada__seta {
  display: inline-block;
  margin-left: 8px;
  transition: transform 220ms var(--curva, cubic-bezier(0.16, 1, 0.3, 1));
}

/* `!important` porque o Elementor escreve a cor do título com
   especificidade maior que a desta regra. O valor é o `text.link` do
   design system, não um verde qualquer. */
.dito-chamada:hover {
  color: #39c881 !important;
}

.dito-chamada:hover .dito-chamada__seta {
  transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
  .dito-chamada,
  .dito-chamada__seta,
  .dito-chamada:hover .dito-chamada__seta {
    transform: none;
    transition: none;
  }
}

/* Texto nunca sai da própria caixa.

   O bloco mede a largura do texto no Figma e a emite; a caixa fica do
   tamanho que o desenho pediu. Basta a fonte renderizar um pouco mais
   larga aqui — outra versão da Poppins, o fallback de sistema enquanto
   ela carrega (`display=swap`), um bloqueador de rastreadores que
   impeça o Google Fonts — para uma palavra longa não caber e o texto
   escorrer para fora, onde o recorte da seção o decepa no meio.

   Foi assim que "RÉGUA DE DECISÃO AUTOMÁTICA" saía 6px da caixa com a
   fonte bloqueada. `break-word` só age quando a palavra REALMENTE não
   cabe: com a fonte certa, nada muda.

   Isto não substitui medir — substitui depender de a medida estar
   sempre certa. */
body.dito-estatica .elementor-heading-title,
body.dito-estatica .elementor-widget-text-editor p,
.dito-case-single .elementor-heading-title,
.dito-case-single .elementor-widget-text-editor p {
  overflow-wrap: break-word;
}

/* ═══════════════════════════════════════════════════════════════
   CELULAR E TABLET: as duas fotos encostam na base
   ───────────────────────────────────────────────────────────────
   No desktop elas já encostam por sangria — o vendedor é cortado pela
   borda da faixa e o mockup pela da hero. Abaixo disso a linha empilha,
   a sangria deixa de fazer sentido e o mesmo gesto precisa vir de
   outro jeito: tirando o respiro que sobra debaixo delas.

   Desvio pedido no que toca à ORDEM: o frame mobile do Figma põe as
   duas fotos no topo.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* HERO — abaixo do desktop a linha empilha e o mockup vira o último
     elemento; zerar os dois paddings de baixo (o do container interno e
     o da seção) o faz encostar sozinho.
     Nada de margem negativa: assim continua certo se o respiro mudar. */
  body.dito-estatica .elementor > .e-con:first-child {
    padding-bottom: 0 !important;
  }

  /* O `.e-con-inner` é neto da seção, não filho: entre os dois está o
     container `boxed`, que é quem segura a largura de conteúdo. */
  body.dito-estatica .elementor > .e-con:first-child > .e-con > .e-con-inner {
    padding-bottom: 0 !important;
  }

  /* FAIXA VERDE — a foto vai para o fim da pilha e sangra o padding de
     baixo. A faixa já recorta (`clipsContent` no Figma, raio 24), então
     o vendedor é cortado pela borda arredondada, igual ao desktop. */
  #dito-banner {
    padding-bottom: 0 !important;
  }

  /* A foto centraliza na faixa. Ela tem 273px numa coluna de 310, e o
     alinhamento do widget vinha do Figma como `start` — o que no
     desktop está certo, porque lá ela fica na coluna da esquerda. */
  #dito-banner > .elementor-widget-image {
    order: 2;
    margin-top: 24px;
    text-align: center;
  }

  #dito-banner > .e-con {
    order: 1;
  }
}

.dito-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.dito-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Figma (152:47): 42x24 para "CX" — 18px de texto mais 12 de padding
     de cada lado. Com 10 a etiqueta saía 4px mais estreita que o
     desenho, o suficiente para não bater ao lado da irmã. */
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  background: var(--e-global-color-background_light, #eceef1);
  color: var(--e-global-color-text_on_primary, #222f51);
}

/* Etiqueta sobre fundo escuro — card em destaque do hero.
   Figma (152:47 e 152:49): fundo #ffffff a 10%, texto #ffffff, sem
   ícone. Mesma caixa, mesmo raio, mesmo padding: só o contexto muda. */
.dito-tags--escura .dito-tag {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.dito-tag__icone {
  width: 13px;
  height: 13px;
  object-fit: contain;
  display: block;
}

/* ── Link "Ver case" ──────────────────────────────────────────
   Figma: 14px/600 · #222f51 · 12px até a seta                 */
/* Cor fixada em TODOS os estados, pelo mesmo motivo dos chips: o
   reset do Hello Elementor traz `a { color: #c36 }` e
   `a:hover, a:active { color: #336 }`. `a:hover` tem especificidade
   (0,1,1) e ganha de `.dito-case__link` (0,1,0) — o link piscava num
   rosa-avermelhado que não existe em lugar nenhum do design system.
   Elemento de plugin não tem o CSS por elemento do Elementor
   protegendo, então a blindagem tem que ser explícita. */
.dito-case__link,
.dito-case__link:link,
.dito-case__link:visited {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  color: var(--e-global-color-text_on_primary, #222f51);
}

.dito-case__link:hover,
.dito-case__link:focus,
.dito-case__link:active {
  color: var(--e-global-color-primary, #39c881);
  text-decoration: none;
}

.dito-case__link:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #39c881);
  outline-offset: 4px;
}

.dito-case__seta {
  display: block;
  flex-shrink: 0;
  /* A seta anda para a direita no hover: o movimento diz "leva para
     outro lugar" antes de a pessoa clicar. Só transform — animar
     `margin` ou `left` obrigaria o navegador a recalcular layout a
     cada quadro. */
  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
}

.dito-case__link:hover .dito-case__seta,
.dito-case__link:focus-visible .dito-case__seta {
  transform: translateX(4px);
}

/* O logo tem altura fixa no design e larguras diferentes por marca:
   limitar a altura é o que mantém a linha do topo do card alinhada. */
/* Caixa de altura FIXA, não `max-height`.
   Figma: a linha do logo tem 40px e o logo ocupa os 40px (nó 152:114).
   Com `max-height`, um logo cuja arte é mais baixa que 40px fica com a
   altura dele mesmo, a linha encolhe e o card seguinte não bate com o
   anterior. Altura fixa + `contain` faz todo logo ocupar a mesma faixa,
   qualquer que seja a proporção do arquivo, e `left center` os alinha
   pela esquerda como no design. */
.elementor .dito-case img.dito-case__logo,
.dito-case .dito-case__logo {
  height: 40px;
  /* Largura fixa, não `auto`. Com `auto`, cada marca ocupa uma largura
     diferente na linha — a Polishop rende 141px contra 79px da Reebok — e
     o que sobra para o badge ao lado muda de card para card. Foi o que
     quebrou "Home & Eletro" em duas linhas. Caixa fixa + `contain` deixa
     a linha idêntica nos três cards, e nenhuma marca é distorcida: a que
     não couber é reduzida e centralizada dentro da caixa. */
  width: 88px;
  flex-shrink: 0;
  object-fit: contain;
  object-position: left center;
}

/* Aviso de diagnóstico — só quem edita vê. */
.dito-aviso {
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--e-global-color-background_light, #eceef1);
  color: var(--e-global-color-text_on_light, #19223c);
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .dito-chip,
  .dito-case__seta {
    transition: none;
  }
  .dito-case__link:hover .dito-case__seta,
  .dito-case__link:focus-visible .dito-case__seta {
    transform: none;
  }
}

/* ═════════════════════════════════════════════════════════════
   Carrossel de depoimentos (coverflow)
   -------------------------------------------------------------
   Medidas do Figma (nó 152:371), mesma proporção 9:16 nos três
   tamanhos — ou seja, é escala pura, não recorte:

     centro   390x720   escala 1
     ±1       326x602   escala 0.836   deslocamento 310px
     ±2       251x464   escala 0.644   deslocamento 526px

   Todos os slides ficam no HTML o tempo todo, empilhados no
   centro; o que muda é o `data-pos` que o JS escreve. Assim a
   ordem de leitura não se altera a cada passo e a transição fica
   só em `transform`/`opacity`/`filter` — as três que o navegador
   anima sem recalcular layout.
   ═════════════════════════════════════════════════════════════ */

.dito-carrossel {
  --slide-largura: 390px;
  --slide-altura: 720px;
  --desloca-1: 310px;
  --desloca-2: 526px;
  --duracao: 520ms;
  --curva: cubic-bezier(0.4, 0, 0.2, 1);
  /* Igual à margem negativa que o bloco aplica no widget — ver a nota
     na linha de controles. */
  --sangria: 80px;

  /* Sem esta linha o carrossel some.
     Todo o conteúdo do palco é `position: absolute`, então ele não
     empurra largura nenhuma; a única coisa que mede alguma coisa aqui
     é a linha de controles (~160px de setas e dots). Um widget de
     shortcode que encolhe até o conteúdo adota esses 160px, o palco
     herda os mesmos 160px pelo `width: 100%`, e o `overflow: hidden`
     recorta os slides — sobra uma tira do vídeo do centro e mais nada.
     O sintoma parece bug de posicionamento e é bug de largura. */
  width: 100%;
}

.dito-carrossel__palco {
  position: relative;
  width: 100%;
  height: var(--slide-altura);
  /* Os slides das pontas passam de 650px do centro e sairiam da tela
     em qualquer viewport menor que o frame do Figma. Recortar aqui é o
     que impede a página inteira de ganhar rolagem horizontal. */
  overflow: hidden;
}

.dito-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--slide-largura);
  height: var(--slide-altura);
  margin: 0;

  transition:
    transform var(--duracao) var(--curva),
    opacity var(--duracao) var(--curva);
}

/* Escurecimento por VÉU, não por `brightness` + `opacity`.
   -------------------------------------------------------------
   As duas primeiras tentativas usavam `filter: brightness(0.55)` com
   `opacity: 0.85`, e o resultado era imagem LAVADA, não escura: o
   `brightness` achata os brancos e deixa tudo cinza, e a `opacity`
   mistura o slide com o fundo da seção em vez de cobri-lo.

   Um retângulo sólido na cor do próprio fundo, por cima, dá o
   "escuro limpo": a imagem continua nítida e com contraste embaixo,
   só que rebaixada. É o mesmo recurso que cinema usa para apagar o
   segundo plano sem borrá-lo.

   O véu é um `::after` e o que anima é a `opacity` DELE — mais barato
   que animar cor, e sincronizado com a mesma `--duracao`/`--curva` da
   translação, para escurecer no mesmo compasso em que o slide sai do
   centro. */
.dito-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: var(--e-global-color-background_default, #0d1c42);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity var(--duracao) var(--curva);
}

/* Ordem das transformações: o `translate` usa a largura sem escala,
   então a conta do deslocamento não muda de tamanho junto. */
.dito-slide[data-pos="0"] {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  z-index: 3;
}

.dito-slide[data-pos="-1"] {
  transform: translateX(calc(-50% - var(--desloca-1))) scale(0.836);
  opacity: 1;
  z-index: 2;
}

.dito-slide[data-pos="1"] {
  transform: translateX(calc(-50% + var(--desloca-1))) scale(0.836);
  opacity: 1;
  z-index: 2;
}

.dito-slide[data-pos="-2"] {
  transform: translateX(calc(-50% - var(--desloca-2))) scale(0.644);
  opacity: 1;
  z-index: 1;
}

.dito-slide[data-pos="2"] {
  transform: translateX(calc(-50% + var(--desloca-2))) scale(0.644);
  opacity: 1;
  z-index: 1;
}

/* Quanto véu em cada posição. Os vizinhos ficam bem escuros — é o que
   você pediu — e os de trás, mais ainda, para a profundidade continuar
   legível. O centro nunca tem véu. */
.dito-slide[data-pos="-1"]::after,
.dito-slide[data-pos="1"]::after {
  opacity: 0.68;
}

.dito-slide[data-pos="-2"]::after,
.dito-slide[data-pos="2"]::after {
  opacity: 0.82;
}

/* Fora do alcance: sai de cena pelo lado para onde iria, para a
   entrada vir da direção certa em vez de aparecer do nada. */
.dito-slide[data-pos="fora-esquerda"],
.dito-slide[data-pos="fora-direita"] {
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

.dito-slide[data-pos="fora-esquerda"] {
  transform: translateX(calc(-50% - var(--desloca-2) - 120px)) scale(0.55);
}

.dito-slide[data-pos="fora-direita"] {
  transform: translateX(calc(-50% + var(--desloca-2) + 120px)) scale(0.55);
}

/* Fundo e borda repetidos nos estados por causa do contrato da
   blindagem lá em cima: a neutralização do hover está em (0,1,1) e
   uma regra de classe pura (0,1,0) perde para ela. */
.dito-slide__play,
.dito-slide__play:hover,
.dito-slide__play:focus,
.dito-slide__play:active {
  border: 0;
  background: var(--e-global-color-background_surface, #222f51);
}

.dito-slide__play {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.dito-slide .dito-slide__capa {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play só no slide do centro: nos laterais o clique navega, e um
   ícone de play ali prometeria uma ação que não acontece. */
.dito-slide__icone {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--duracao) var(--curva), transform 200ms var(--curva);
}

.dito-slide__icone::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 18px solid #ffffff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  transform: translateX(3px);
}

/* Reel: o botão não é "tocar", é "ligar o som".
   -------------------------------------------------------------
   Com arquivo próprio o vídeo já está rodando mudo, em laço. Um
   triângulo de play ali prometeria a coisa errada — a pessoa clicaria
   esperando começar algo que já começou.

   Glifo por `mask`: o desenho vem do SVG e a COR vem do CSS, então o
   mesmo ícone serve em qualquer fundo sem precisar de dois arquivos.
   O círculo de vidro continua sendo o mesmo do play. */
/* No canto, não no meio: no meio o ícone tapa o rosto de quem fala,
   que é justamente o conteúdo do depoimento. */
.dito-slide--reel .dito-slide__icone {
  inset: auto 12px 12px auto;
  margin: 0;
  width: 44px;
  height: 44px;
}

.dito-slide--reel .dito-slide__icone::after {
  width: 22px;
  height: 22px;
  border: 0;
  transform: none;
  background: #ffffff;
  -webkit-mask: var(--icone-som) center / contain no-repeat;
  mask: var(--icone-som) center / contain no-repeat;
}

/* Mudo: alto-falante cortado. */
.dito-slide--reel,
.dito-depo-video--reel {
  --icone-som: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E");
}

/* Com som: as ondas. */
.dito-slide--com-som,
.dito-depo-video--com-som {
  --icone-som: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E");
}

/* Vídeo-capa preenche o slide como a imagem preenchia. */
.dito-slide__reel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.dito-carrossel--horizontal .dito-slide__reel {
  border-radius: 16px;
}

.dito-slide[data-pos="0"] .dito-slide__icone {
  opacity: 1;
}

.dito-slide[data-pos="0"] .dito-slide__play:hover .dito-slide__icone {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.28);
}

/* Enquanto o vídeo toca, a capa e o play saem do caminho — mas
   continuam no DOM para o slide voltar ao estado inicial ao sair do
   centro, sem precisar recarregar imagem nenhuma.

   `!important` e classe dobrada porque a blindagem forte declara
   `display: block !important` no play — ela precisa disso para conter
   o reset do tema, mas o valor NEUTRO dela vencia o estado do
   componente: (0,2,0) com `!important` contra (0,2,0) sem. O iframe do
   YouTube entrava no DOM, com 390x720 e tudo certo, e ficava ATRÁS da
   capa. Dava play e não se via nada.

   Quarta vez que a blindagem forte apaga o próprio componente do mesmo
   jeito. Aqui a regra de estado é dobrada para (0,3,0) e leva o
   `!important` junto, que é o que o arquivo já faz no hover da seta. */
.dito-slide--tocando .dito-slide__play.dito-slide__play {
  display: none !important;
}

/* Carregando: a capa CONTINUA, e o ícone pulsa.
   -------------------------------------------------------------
   O embed do YouTube leva de um a três segundos para pintar, e nesse
   intervalo o slide não pode ficar preto — nem parecer que o clique
   não fez nada. A capa fica onde está, o ícone de play vira sinal de
   espera, e só quando o player dispara `load` é que a troca acontece.

   O iframe já está no DOM carregando por baixo: `opacity` e não
   `display`, porque `display: none` num iframe recém-inserido é
   exatamente o tipo de coisa que faz o navegador adiar a requisição. */
.dito-slide__video {
  opacity: 0;
  transition: opacity 240ms var(--curva);
}

.dito-slide--tocando .dito-slide__video {
  opacity: 1;
}

.dito-slide--carregando .dito-slide__icone {
  animation: dito-espera 1.1s ease-in-out infinite;
}

@keyframes dito-espera {
  50% {
    opacity: 0.4;
    transform: scale(0.9);
  }
}

/* ── Hover dos laterais ─────────────────────────────────────────
   Clicar num lateral traz ele para o centro, e nada no estado parado
   diz isso. O hover é a única affordance possível: o véu abre na
   direção da nitidez que o slide terá no centro, e ele sobe 4px. Só o
   véu e a translação mudam — a escala é do CSS de posição e mexer nela
   aqui brigaria com a transição de troca de slide. */
.dito-slide:not([data-pos="0"]) .dito-slide__play {
  cursor: pointer;
}

.dito-slide[data-pos="-1"]:hover::after,
.dito-slide[data-pos="1"]:hover::after {
  opacity: 0.28;
}

.dito-slide[data-pos="-2"]:hover::after,
.dito-slide[data-pos="2"]:hover::after {
  opacity: 0.5;
}

.dito-slide[data-pos="-1"]:hover {
  transform: translateX(calc(-50% - var(--desloca-1))) scale(0.836) translateY(-4px);
}

.dito-slide[data-pos="1"]:hover {
  transform: translateX(calc(-50% + var(--desloca-1))) scale(0.836) translateY(-4px);
}

.dito-slide[data-pos="-2"]:hover {
  transform: translateX(calc(-50% - var(--desloca-2))) scale(0.644) translateY(-4px);
}

.dito-slide[data-pos="2"]:hover {
  transform: translateX(calc(-50% + var(--desloca-2))) scale(0.644) translateY(-4px);
}

.dito-slide__play:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #39c881);
  outline-offset: 4px;
}

/* O vídeo entra no lugar da capa quando dá play. */
/* stylelint-disable-next-line no-duplicate-selectors -- o bloco acima é a transição de entrada; este é a caixa do iframe */
.dito-slide__video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: 8px;
  background: #000;
}

/* ── Controles ──────────────────────────────────────────────── */

/* Figma: linha de 768px — seta na ponta esquerda (x=351), dots no meio
   (x=712) e seta na ponta direita (x=1079), tudo relativo a um frame de
   1470. Não é um grupo centralizado com gap: as setas ficam LONGE dos
   dots, e é isso que dá o respiro do design.

   O `min()` com a sangria existe porque o bloco aplica margem negativa
   no widget INTEIRO para o palco poder transbordar o gutter. Os
   controles vão junto — e no celular, onde a sangria (20px) é grande
   perto da tela, as setas encostam na borda. Descontar duas sangrias
   devolve a linha para dentro do conteúdo sem tocar no palco. Os
   valores são os mesmos `container_padding` do design system que o
   gerador usa para calcular a sangria. */
@media (max-width: 1023px) {
  .dito-carrossel { --sangria: 40px; }
}

@media (max-width: 767px) {
  .dito-carrossel { --sangria: 20px; }
}

.dito-carrossel__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: min(768px, 100% - var(--sangria) * 2);
  /* Figma: base do Group 5 em y=1090, topo da linha de controles em
     y=1130 — 40px, o mesmo gap que separa o título dos vídeos. */
  margin: 40px auto 0;
}

/* Figma: círculo de 40px em #293f76, borda de 1px em #39c881 e o
   glifo na mesma cor da borda (amostrado do PNG do frame). */
/* Borda e cores nos quatro estados, pelo contrato da blindagem. */
.dito-seta,
.dito-seta:hover,
.dito-seta:focus,
.dito-seta:active {
  border: 1px solid var(--e-global-color-primary, #39c881);
}

.dito-seta,
.dito-seta:focus,
.dito-seta:active {
  background: #293f76;
  color: var(--e-global-color-primary, #39c881);
}

.dito-seta {
  --seta-hover-fundo: var(--e-global-color-primary, #39c881);
  --seta-hover-glifo: #293f76;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 200ms var(--curva), color 200ms var(--curva),
    transform 200ms var(--curva);
}

/* A cor do hover é do CONTEXTO, não do botão.
   -------------------------------------------------------------
   Encher de verde funciona muito bem sobre o navy do carrossel de
   vídeo — e some sobre o verde da seção de lideranças, onde o botão
   vira um buraco com a setinha solta. Não existe uma cor só que
   sirva para os dois; existe uma REGRA: o hover não pode ser a cor
   do fundo da seção.

   Por isso a cor vira variável com o verde como padrão, e só a
   seção que usa verde de fundo a troca. Seção nova herda o padrão;
   se algum dia o fundo dela for verde, a linha de exceção fica ao
   lado desta e o motivo continua visível. */
.dito-liderancas .dito-seta {
  --seta-hover-fundo: var(--e-global-color-background_white, #ffffff);
}

/* `!important` aqui e não numa regra separada lá embaixo: este seletor
   já é (0,2,0) e já é o dono do hover da seta. Repeti-lo na blindagem
   forte criaria duas fontes de verdade para a mesma coisa — e a
   segunda inevitavelmente ficaria para trás. */
.dito-seta.dito-seta:hover,
.dito-seta.dito-seta:focus-visible {
  background: var(--seta-hover-fundo) !important;
  color: var(--seta-hover-glifo) !important;
  border-color: var(--seta-hover-fundo) !important;
}

/* O glifo desliza para o lado que o botão navega — mesma linguagem da
   setinha do "Ver case" na grade de cases. */
.dito-seta svg {
  transition: transform 200ms var(--curva);
}

.dito-seta--anterior:hover svg {
  transform: translateX(-2px);
}

.dito-seta--proximo:hover svg {
  transform: translateX(2px);
}

.dito-seta:active {
  transform: scale(0.94);
}

.dito-seta:focus-visible {
  outline: 2px solid #39c881;
  outline-offset: 3px;
}

.dito-dot:hover {
  background: var(--dot-ativo);
  transform: scale(1.25);
}

.dito-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Figma: 10px, gap de 8px, inativo #a2a9b8 e ativo #ffffff — os dois
   em opacidade cheia. O contraste vem da cor, não de transparência.

   O par vira VARIÁVEL pelo mesmo motivo da seta logo acima: a seção de
   lideranças tem fundo VERDE, e ali o cinza do desenho fica em 1,10:1 —
   praticamente invisível. Quem tem fundo diferente troca as duas cores
   num lugar só, e a blindagem forte lá embaixo lê as mesmas variáveis,
   para não existirem duas fontes de verdade para a mesma cor. */
.dito-dot {
  --dot-inativo: #a2a9b8;
  --dot-ativo: var(--e-global-color-background_white, #ffffff);
}

/* Fundo verde: o par se inverte — brancos apagados, azul da marca no
   selecionado, que é a mesma cor das setas ao lado. */
.dito-liderancas .dito-dot {
  --dot-inativo: var(--e-global-color-background_white, #ffffff);
  --dot-ativo: var(--e-global-color-secondary, #0d1c42);
}

.dito-dot,
.dito-dot:focus,
.dito-dot:active {
  background: var(--dot-inativo);
  border: 0;
}

/* stylelint-disable-next-line no-duplicate-selectors -- o bloco acima declara as cores; este, a geometria */
.dito-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 200ms var(--curva), transform 200ms var(--curva);
}

.dito-dot[aria-current="true"] {
  background: var(--dot-ativo);
}

.dito-dot:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #39c881);
  outline-offset: 3px;
}

/* ── Telas menores ──────────────────────────────────────────── */

@media (max-width: 1023px) {
  .dito-carrossel {
    --slide-largura: 300px;
    --slide-altura: 554px;
    --desloca-1: 238px;
    --desloca-2: 404px;
  }
}

@media (max-width: 767px) {
  .dito-carrossel {
    --slide-largura: 240px;
    --slide-altura: 443px;
    --desloca-1: 150px;
    --desloca-2: 250px;
  }
  /* No celular só o centro e os vizinhos imediatos cabem. */
  .dito-slide[data-pos="-2"],
  .dito-slide[data-pos="2"] {
    opacity: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dito-slide,
  .dito-slide::after,
  .dito-slide__icone,
  .dito-seta,
  .dito-dot {
    transition: none;
  }

  /* O deslocamento de 4px do hover é enfeite; a abertura do véu é que
     comunica "este responde ao clique". Some o movimento, fica a cor. */
  .dito-slide[data-pos="-1"]:hover {
    transform: translateX(calc(-50% - var(--desloca-1))) scale(0.836);
  }

  .dito-slide[data-pos="1"]:hover {
    transform: translateX(calc(-50% + var(--desloca-1))) scale(0.836);
  }

  .dito-slide[data-pos="-2"]:hover {
    transform: translateX(calc(-50% - var(--desloca-2))) scale(0.644);
  }

  .dito-slide[data-pos="2"]:hover {
    transform: translateX(calc(-50% + var(--desloca-2))) scale(0.644);
  }

  .dito-dot:hover,
  .dito-seta:active {
    transform: none;
  }

  .dito-lightbox__fundo,
  .dito-lightbox__palco {
    animation: none;
  }

  /* Sem pulso: o ícone fica na opacidade reduzida, parado. O sinal de
     "estou carregando" continua existindo — só não se mexe. */
  .dito-slide--carregando .dito-slide__icone {
    animation: none;
    opacity: 0.4;
  }
}

/* ═════════════════════════════════════════════════════════════
   Carrossel de citações das lideranças (nó 152:401)
   -------------------------------------------------------------
   Medidas do Figma:
     slide      961px · foto 270x280 r20 · gap 24 · card 667 r16
     card       padding 40 · gap 24 · fundo #ffffff
     citação    18px/29 itálico #19223c
     autor      borda-topo 1px #eceef1 · padding-topo 16 · gap 16
     logo       40px de altura
     nome       14px/20 peso 600 #19223c
     cargo      12px/16 peso 400 #6a7282
     controles  768px, 40px depois do slide + 32 de padding

   Um slide por vez, em crossfade. Os slides dividem a MESMA célula
   de grade em vez de serem absolutos: assim o palco assume a altura
   do maior deles sozinho, sem ninguém medir nada em JS, e citações
   de tamanhos diferentes não fazem a seção pular de altura a cada
   passo — que é o defeito clássico deste tipo de carrossel.
   ═════════════════════════════════════════════════════════════ */

.dito-liderancas {
  --duracao: 400ms;
  --curva: cubic-bezier(0.4, 0, 0.2, 1);

  width: 100%;
  max-width: 961px;
  margin-inline: auto;
}

.dito-liderancas__palco {
  display: grid;
}

.dito-lid {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 24px;

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  /* `visibility` sai do alcance do leitor de tela e do Tab. O atraso
     igual à duração deixa a saída ser vista antes de sumir. */
  visibility: hidden;
  transition:
    opacity var(--duracao) var(--curva),
    transform var(--duracao) var(--curva),
    visibility 0s linear var(--duracao);
}

.dito-lid[data-ativo="true"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

/* Seletor duplo, e não `.dito-lid__foto` sozinho.
   O CSS do Elementor traz `.elementor img { height: auto }` com
   especificidade (0,1,1), que ganha de qualquer classe simples (0,1,0).
   Toda imagem deste plugin vive dentro de um `.elementor`, então altura
   declarada em uma classe só é silenciosamente descartada — a foto de
   270x280 saía com 496px de altura. Repetir a classe do ancestral leva
   a regra a (0,2,0) e devolve a decisão para cá. */
.dito-lid .dito-lid__foto {
  flex-shrink: 0;
  width: 270px;
  height: 280px;
  object-fit: cover;
  /* Retrato recortado pelo centro corta a cabeça quando a foto é mais
     alta que a caixa — que é o caso em todo formato vertical. Ancorar
     um pouco acima do meio mantém o rosto dentro do recorte sem
     depender de o cliente enquadrar a foto perfeitamente. */
  object-position: center 25%;
  border-radius: 20px;
  display: block;
}

.dito-lid__card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
  border-radius: 16px;
  background: var(--e-global-color-background_white, #ffffff);
  /* Altura padrão, a do Figma. Sem ela, uma citação de duas linhas
     encolhe o card e a seção inteira muda de altura na troca de slide —
     todos os slides dividem a mesma célula de grade, então quem manda é
     o maior. Com o mínimo fixo, citações dentro do limite de caracteres
     não mexem no desenho; o card só cresce se alguém passar do teto. */
  min-height: 328px;
}

.dito-lid__aspas {
  display: block;
  color: var(--e-global-color-primary, #39c881);
}

.dito-lid__citacao {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  line-height: 29px;
  color: var(--e-global-color-text_on_light, #19223c);
}

.dito-lid__autor {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--e-global-color-border_light, #eceef1);
  /* Empurra o autor para a base do card: com citações de tamanhos
     diferentes, a linha do autor ficaria em alturas diferentes a cada
     troca e o rodapé do card pareceria pular. */
  margin-top: auto;
}

.dito-lid .dito-lid__logo {
  flex-shrink: 0;
  height: 40px;
  width: auto;
  max-width: 141px;
  object-fit: contain;
  object-position: left center;
}

.dito-lid__pessoa {
  min-width: 0;
}

.dito-lid__nome {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--e-global-color-text_on_light, #19223c);
}

.dito-lid__cargo {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--e-global-color-text_disabled, #6a7282);
}

/* Figma: 40px de gap entre o slide e a linha, mais 32 de padding
   dentro dela. */
.dito-liderancas__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 768px;
  margin: 72px auto 0;
}

/* ── Telas menores ──────────────────────────────────────────── */

@media (max-width: 1023px) {
  .dito-lid .dito-lid__foto {
    width: 220px;
    height: 240px;
  }

  .dito-lid__card {
    padding: 32px;
    min-height: 300px;
  }
}

@media (max-width: 767px) {
  /* A foto sobe para cima do card: lado a lado, sobrariam menos de
     150px para uma citação de quatro linhas. */
  .dito-lid {
    flex-direction: column;
    align-items: stretch;
  }

  .dito-lid .dito-lid__foto {
    width: 100%;
    height: 220px;
  }

  .dito-lid__card {
    padding: 24px;
    /* No celular a citação ocupa mais linhas e a altura mínima do
       desktop só sobraria como espaço vazio. */
    min-height: 0;
  }

  .dito-lid__citacao {
    font-size: 16px;
    line-height: 26px;
  }

  .dito-liderancas__controles {
    margin-top: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dito-lid {
    transition: opacity var(--duracao) var(--curva), visibility 0s linear var(--duracao);
    transform: none;
  }
}

/* ═════════════════════════════════════════════════════════════
   Carrossel de cases em vídeo — variante horizontal (nó 152:438)
   -------------------------------------------------------------
   Mesmo mecanismo da variante vertical: os slides ficam todos no
   HTML, empilhados no centro, e o `data-pos` decide a posição. Só
   as MEDIDAS mudam, e por isso elas vivem em custom properties —
   o CSS de posição lá em cima não precisa saber de formato nenhum.

   Figma (Group 4, dentro de um container de 1110px):
     centro  607x341  (16:9)
     ±1      321x180  -> escala 0.529 · deslocamento 394px
     só 3 slides visíveis; não há ±2 nesta versão
   ═════════════════════════════════════════════════════════════ */

.dito-carrossel--horizontal {
  --slide-largura: 607px;
  --slide-altura: 341px;
  --desloca-1: 394px;
  /* O ±2 não estava no Figma — o desenho tinha 3 slides. Entrou depois,
     para o carrossel deitado ter a mesma profundidade dos reels.

     Os números não são chute: são a MESMA proporção que a versão em pé
     usa entre os dois níveis, aplicada às medidas daqui.
       em pé:   deslocamento 526/310 = 1,70   ·  escala 0,644/0,836 = 0,77
       deitado: 394 x 1,70 = 669              ·  0,529 x 0,77 = 0,407
     Assim os dois carrosséis têm o mesmo "passo" de perspectiva mesmo
     tendo slides de tamanhos bem diferentes. */
  /* 516 e não 669: o palco daqui é mais estreito.
     O bloco dos reels sangra -80px pelas laterais e o de cases não
     sangrava — o palco tinha 1120px, e com a proporção "pura" o ±2
     nascia em 669 e sobravam 14px dele dentro da caixa. Invisível.
     Com a mesma sangria dos reels o palco vai a 1280, e 516 é o que
     coloca o ±2 espiando 86px além do ±1. */
  --desloca-2: 516px;
}

/* Sangria igual à do bloco de reels.
   -------------------------------------------------------------
   Não é enfeite: é o que dá espaço para o quinto slide existir. Sem
   ela o palco tem a largura do conteúdo (1120px) e os ±2 ficam do lado
   de fora, recortados pelo `overflow: hidden` do palco.

   Os valores são os mesmos que o gerador emitiu para o carrossel em
   pé, e por um bom motivo: são o padding lateral da seção em cada
   breakpoint. Sangrar mais que isso fura a largura do pai e devolve
   rolagem horizontal à página. */
/* stylelint-disable-next-line no-duplicate-selectors -- o bloco acima declara as medidas do slide; este, a sangria lateral */
.dito-carrossel--horizontal {
  /* `auto` é o que faz a margem negativa ALARGAR em vez de empurrar.
     Com a largura fixa em 100% que `.dito-carrossel` declara, a caixa
     mantinha os 1120px e só deslizava para a esquerda — o carrossel
     inteiro saía 79px fora do centro da página, com o título centrado
     logo acima entregando o desencontro. */
  width: auto;
  margin-left: -80px;
  margin-right: -80px;
}

@media (max-width: 1023px) {
  .dito-carrossel--horizontal {
    margin-left: -40px;
    margin-right: -40px;
  }
}

@media (max-width: 767px) {
  .dito-carrossel--horizontal {
    margin-left: -20px;
    margin-right: -20px;
  }
}

/* A escala dos laterais é do formato, não da posição: 0.529 aqui contra
   0.836 na vertical. Redeclarar só os dois níveis que existem. */
.dito-carrossel--horizontal .dito-slide[data-pos="-1"] {
  transform: translateX(calc(-50% - var(--desloca-1))) scale(0.529);
}

.dito-carrossel--horizontal .dito-slide[data-pos="1"] {
  transform: translateX(calc(-50% + var(--desloca-1))) scale(0.529);
}

.dito-carrossel--horizontal .dito-slide[data-pos="-2"] {
  transform: translateX(calc(-50% - var(--desloca-2))) scale(0.407);
}

.dito-carrossel--horizontal .dito-slide[data-pos="2"] {
  transform: translateX(calc(-50% + var(--desloca-2))) scale(0.407);
}

.dito-carrossel--horizontal .dito-slide[data-pos="-2"]:hover {
  transform: translateX(calc(-50% - var(--desloca-2))) scale(0.407) translateY(-4px);
}

.dito-carrossel--horizontal .dito-slide[data-pos="2"]:hover {
  transform: translateX(calc(-50% + var(--desloca-2))) scale(0.407) translateY(-4px);
}

.dito-carrossel--horizontal .dito-slide[data-pos="-1"]:hover {
  transform: translateX(calc(-50% - var(--desloca-1))) scale(0.529) translateY(-4px);
}

.dito-carrossel--horizontal .dito-slide[data-pos="1"]:hover {
  transform: translateX(calc(-50% + var(--desloca-1))) scale(0.529) translateY(-4px);
}

/* Vídeo horizontal: o card tem o raio de 16 do Figma, contra os 8 do
   reels. */
.dito-carrossel--horizontal .dito-slide__play,
.dito-carrossel--horizontal .dito-slide__video {
  border-radius: 16px;
}

@media (max-width: 1023px) {
  .dito-carrossel--horizontal {
    --slide-largura: 480px;
    --slide-altura: 270px;
    --desloca-1: 312px;
  }
}

@media (max-width: 767px) {
  .dito-carrossel--horizontal {
    --slide-largura: 300px;
    --slide-altura: 169px;
    --desloca-1: 186px;
  }
}

/* =============================================================
   Conteúdo do case — o que vem do cadastro, não do bloco
   -------------------------------------------------------------
   Estas peças são desenhadas aqui porque a QUANTIDADE delas varia
   por case: três resultados num, quatro noutro. O que o Elementor
   segura é o layout em volta; o miolo repetível é HTML do plugin,
   igual às tags do card e aos carrosséis.

   Tokens: brand.primary #39c881 · text.on_light #19223c
           text.muted_on_light #99a1af · border.light #eceef1
           background.white #fff · radius.xl 16px
   ============================================================= */

.dito-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}

/* ── Faixa de resultados ─────────────────────────────────────── */
.dito-lista--resultados {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: center;
}

.dito-resultado {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Divisória ENTRE os itens, e não à direita de cada um: `:not(:first-child)`
   evita a linha solta na borda esquerda da faixa. */
.dito-lista--resultados .dito-resultado:not(:first-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.dito-resultado__valor {
  font-family: Poppins, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  color: #39c881;
}

.dito-resultado__legenda {
  font-size: 14px;
  color: #fff;
}

/* ── Tópicos do desafio ──────────────────────────────────────── */
.dito-lista--desafios {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dito-desafio {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: #fff;
  border: 1px solid #eceef1;
  border-radius: 16px;
}

.dito-desafio__icone {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.dito-desafio__texto {
  font-size: 14px;
  line-height: 1.5;
  color: #19223c;
}

/* ── Cards de dados ──────────────────────────────────────────── */
.dito-lista--dados {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dito-dado {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: #fff;
  border: 1px solid #eceef1;
  border-radius: 16px;
  text-align: center;
}

.dito-dado__valor {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  color: #39c881;
}

.dito-dado__titulo {
  font-size: 20px;
  font-weight: 600;
  color: #19223c;
}

.dito-dado__texto {
  font-size: 14px;
  line-height: 1.5;
  color: #99a1af;
}

/* ── Etiquetas do topo ───────────────────────────────────────── */
/* O respiro acima NÃO vem daqui: vem do bloco.
   O gerador passou a herdar o `padding` do nó do Figma que virou
   shortcode e emiti-lo como margem — então este CSS não deve somar
   nada, ou o espaço sai em dobro. */
.dito-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dito-etiqueta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Figma: 12/16, altura 64. Com 8 a etiqueta fechava em 61 e o rótulo
     encostava na borda de cima. */
  padding: 12px 16px;
  background: #222f51;
  border-radius: 8px;
  transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dito-etiqueta__rotulo {
  font-size: 12px;
  color: #a2a9b8;
}

.dito-etiqueta__valor {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* ── Produtos usados ─────────────────────────────────────────── */
.dito-produtos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.dito-produto {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border: 1px solid #eceef1;
  border-radius: 16px;
}

.dito-produto__icone {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #eceef1;
  border-radius: 16px;
  transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dito-produto__texto {
  display: flex;
  flex-direction: column;
}

.dito-produto__nome {
  font-size: 14px;
  font-weight: 600;
  color: #19223c;
}

.dito-produto__desc {
  font-size: 12px;
  color: #99a1af;
}

/* ── Texto longo do case ─────────────────────────────────────── */

/* Cor explícita, e não herdada.
   -------------------------------------------------------------
   Estes parágrafos saíam de um widget text-editor que carregava a
   própria tipografia; virando shortcode, passaram a herdar do kit —
   e o kit é de fundo escuro, então `text.body` é BRANCO. Resultado:
   dois parágrafos invisíveis no meio de uma seção branca, sem nada
   na tela indicando que havia texto ali. */
.dito-case__texto {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #4a5565;
}

.dito-case__texto p {
  margin: 0 0 16px;
}

.dito-case__texto p:last-child {
  margin-bottom: 0;
}

/* ── Fotos do case ───────────────────────────────────────────── */

/* `.elementor img` prefixado: o tema e o Elementor declaram
   `.elementor img { max-width: 100%; height: auto }`, que é (0,1,1) e
   ganha de uma classe sozinha (0,1,0). Sem o prefixo o `max-width` do
   logo era ignorado e a marca saía com a largura inteira do cartão. */
.elementor img.dito-case__hero_foto,
.elementor img.dito-case__sobre_foto,
.elementor img.dito-case__solucao_foto {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Fora do card, o logo é a marca no topo da página do case: não tem
   faixa de 40px para respeitar, e sim uma caixa fixa. A regra do
   card acima é mais específica de propósito — as duas convivem, e é a
   posição na página que decide qual vale.

   A MEDIDA É A ALTURA, não a largura.
   -------------------------------------------------------------
   Com teto só de largura, o tamanho na tela passava a depender do
   formato do arquivo que o cliente subiu: o logo quadrado da RN
   Tintas (300x300) virava 180x180 e ficava do tamanho de um título,
   enquanto o da Animale (260x60) saía com 41px de altura. Dois logos
   na mesma posição, um quatro vezes maior que o outro.

   Fixando a altura, todos ocupam a mesma faixa. O teto de largura
   continua para o caso do logo muito deitado, que a 56px de altura
   atravessaria meia coluna — nesse caso ele é limitado pela largura e
   `contain` mantém a proporção, sem esticar. */
.elementor img.dito-case__logo {
  height: 56px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

/* ── Vídeo do depoimento ─────────────────────────────────────── */
.dito-depo-video {
  position: relative;
  width: 100%;
  max-width: 390px;
  aspect-ratio: 390 / 720;
  overflow: hidden;
  border-radius: 16px;
  background: #222f51;
}

.dito-depo-video__capa,
.dito-depo-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vídeo DEITADO — o outro formato do painel.
   -------------------------------------------------------------
   Nem todo cliente filma em pé. Enfiar um vídeo 16:9 na caixa 9:16
   recorta uma faixa na altura do peito; o contrário deixa duas tarjas
   pretas ocupando dois terços do espaço.

   Aqui o vídeo deixa de ser uma coluna e passa a ser a largura toda,
   com a citação embaixo — que é como um vídeo deitado quer ser visto.
   `object-fit: contain` porque, no formato certo, não há nada a
   recortar: o vídeo preenche a caixa exatamente. */
/* Citação: um passo abaixo do desenho, SÓ no formato deitado.
   -------------------------------------------------------------
   O Figma pede 24px/39, e em pé continua sendo isso. Deitado, o vídeo
   ocupa 607px da fileira e sobra menos coluna para o texto — a mesma
   citação no mesmo tamanho fica com o dobro de linhas.

   Ancorado em `:has(.dito-depo-video--horizontal)` e não numa classe
   do Elementor: o id do container muda a cada importação, a nossa
   classe não. Sem suporte a `:has()`, fica o tamanho do desenho —
   nada quebra. */
.e-con:has(.dito-depo-video--horizontal) .elementor-widget-text-editor,
.e-con:has(.dito-depo-video--horizontal) .elementor-widget-text-editor p {
  font-size: 21px;
  line-height: 34px;
}

/* Seção inteira oculta.
   -------------------------------------------------------------
   Seção sem conteúdo NÃO some sozinha no Elementor: sobra a faixa com
   o título e nada embaixo. Quando o case não tem depoimento, o
   shortcode devolve um marcador e é ele que apaga a seção.

   `> .e-con` de propósito: só uma seção de PRIMEIRO nível some. Sem o
   filho direto, `:has()` casaria com todos os ancestrais e levaria a
   página junto.

   Sem suporte a `:has()` a seção aparece vazia — feio, não quebrado. */
.elementor > .e-con:has(.dito-secao-oculta) {
  display: none;
}

/* Foto no lugar do vídeo: RETRATO REDONDO, não a caixa do vídeo.
   -------------------------------------------------------------
   A caixa do vídeo é 390x720, a medida de um story. Uma foto parada
   nesse tamanho vira o assunto da seção: ocupava mais altura que a
   citação inteira e empurrava o nome de quem fala para o rodapé da
   fileira.

   Redonda e menor, ela faz o que uma foto de depoimento faz — dizer
   quem está falando — e a citação volta a ser o centro. `cover`
   porque a foto do cliente raramente vem quadrada, e recortar é
   melhor do que deformar o rosto.

   A coluna acompanha: sem isso ela guardaria os 390px do vídeo e
   deixaria um buraco de 110px ao lado do retrato. */
.dito-depo-video--foto {
  width: 280px;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  align-self: center;
}

.elementor-element:has(> .elementor-widget-container > .elementor-shortcode > .dito-depo-video--foto) {
  width: min(280px, 100%);
  max-width: 100%;
  align-self: center;
}

.dito-depo-video--foto .dito-depo-video__capa {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Em pé: o ícone é de SOM, não de play.
   -------------------------------------------------------------
   O vídeo já está rodando mudo, como um reels. Um triângulo de play
   ali prometeria começar algo que já começou — o mesmo raciocínio (e
   os mesmos glifos) do carrossel. No canto, e não no meio, porque no
   meio ele tapa o rosto de quem fala. */
.dito-depo-video--reel .dito-depo-video__play-icone {
  inset: auto 12px 12px auto;
  margin: 0;
  width: 44px;
  height: 44px;
  opacity: 1;
}

.dito-depo-video--reel .dito-depo-video__play-icone::after {
  width: 22px;
  height: 22px;
  border: 0;
  transform: none;
  background: #ffffff;
  -webkit-mask: var(--icone-som) center / contain no-repeat;
  mask: var(--icone-som) center / contain no-repeat;
}

/* 607x341: a mesma caixa do slide central do carrossel de cases.
   Reaproveitar a medida que já existe na entrega evita inventar um
   terceiro tamanho de vídeo deitado — a página inteira passa a falar
   de 16:9 com o mesmo número. */
.dito-depo-video--horizontal {
  width: 607px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

.dito-depo-video--horizontal .dito-depo-video__capa,
.dito-depo-video--horizontal video {
  object-fit: contain;
}

/* O widget larga a largura fixa de 390px quando o vídeo é deitado.
   -------------------------------------------------------------
   O lugar do vídeo é o mesmo nos dois formatos — ao lado da citação.
   O que muda é a caixa: 390 de largura em pé, 607 deitado.

   `:has()` porque quem sabe o formato é o VÍDEO: ele vem de um campo
   do case, e o container do Elementor à volta é gerado do Figma, que
   só conhece a medida em pé. Sem `:has()`, o navegador antigo mantém
   os 390 e o vídeo sai menor — mais apertado, mas inteiro e no lugar
   certo. É melhora progressiva, não dependência. */
.elementor-element:has(> .elementor-widget-container > .elementor-shortcode > .dito-depo-video--horizontal) {
  width: min(607px, 100%);
  max-width: 100%;
}

/* No tablet os 607px não cabem ao lado do texto.
   A fileira ali tem ~673px de largura útil: o vídeo ficava com 607 e
   a citação com 66, o que jogava até o nome de quem fala para fora da
   caixa. Metade da fileira mantém os dois legíveis, e o vídeo continua
   16:9 porque a proporção é da caixa, não da largura. */
@media (max-width: 1023px) {
  .elementor-element:has(> .elementor-widget-container > .elementor-shortcode > .dito-depo-video--horizontal) {
    width: min(607px, 50%);
  }
}

/* ── Responsivo ──────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .dito-lista--dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .dito-lista--resultados,
  .dito-lista--desafios,
  .dito-lista--dados { grid-template-columns: minmax(0, 1fr); }

  /* Empilhado, a divisória vertical vira um traço solto no meio do
     nada: some. */
  .dito-lista--resultados .dito-resultado:not(:first-child) {
    border-left: 0;
  }

  .dito-produto { width: 100%; }
}


/* ── "Ver case completo": link em forma de botão ─────────────────
   No cartão de destaque o mesmo shortcode do "Ver case" precisa sair
   como botão verde. A diferença é de aparência, não de conteúdo, então
   ela mora aqui e não num segundo shortcode.
   Os quatro estados vão declarados: o reset do tema tem regra própria
   para `a`, `a:hover` e `a:active`, e o que ele não encontra declarado
   ele pinta de #c36.                                             */
:where([class^="dito-"], [class*=" dito-"]) .dito-case__link--botao,
.dito-case__link--botao,
.dito-case__link--botao:link,
.dito-case__link--botao:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Figma (152:51): 196x44, padding 12/20, raio 8.
     Estava 24 de padding e 9999 de raio — pílula em vez de botão. O
     raio veio de copiar o formato das etiquetas, que são pílulas de
     propósito; o botão não é. */
  padding: 12px 20px;
  background: #39c881;
  border-radius: 8px;
  color: #19223c;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dito-case__link--botao:hover,
.dito-case__link--botao:focus-visible,
.dito-case__link--botao:active {
  background: #2fae6f;
  color: #19223c;
}

.dito-case__link--botao:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .dito-case__link--botao { transition: none; }
}

/* =============================================================
   Movimento — página de um case
   -------------------------------------------------------------
   Entrada em cena, hovers e o player do depoimento.

   Contrato que vale para TODO hover deste arquivo: o reset do tema
   declara `a:hover`, `a:active` e `button:hover` em (0,1,1) e pinta
   de #c36 o que não encontrar declarado. Por isso cor, fundo e
   borda aparecem repetidos nos estados — é o que impede o vermelho
   de voltar, não excesso de zelo.
   ============================================================= */

/* ── Entrada em cena ─────────────────────────────────────────────
   A classe `dito-anima` é o estado ESCONDIDO, e quem a aplica é o JS.
   Assim, sem JS a página não tem nada escondido para revelar: o
   conteúdo simplesmente está lá. O contrário — esconder no CSS e
   revelar no JS — deixa a página em branco quando o script falha. */
.dito-anima {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 460ms cubic-bezier(0.16, 1, 0.3, 1) var(--dito-atraso, 0ms),
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1) var(--dito-atraso, 0ms);
}

/* `will-change` foi tirado daqui de propósito.

   A classe é aplicada a TODOS os alvos de uma vez, no carregamento —
   na Home & Eletro eram 128 elementos. Cada um virava uma camada de
   composição promovida e mantida em memória antes mesmo de entrar na
   tela, e a página passou a engasgar ao rolar.

   `will-change` é para o que está prestes a animar, não para o que
   talvez anime daqui a três telas. Sem ele, transição de opacity e
   transform já é barata: as duas são propriedades de composição e não
   disparam layout nem paint. */

.dito-anima--visivel {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ── Cards que reagem ao ponteiro ────────────────────────────────
   Sobe 2px, a sombra abre e a borda ganha a cor da marca. O
   deslocamento é pequeno de propósito: são quatro cards lado a lado,
   e um salto maior faria a grade inteira parecer instável. */
.dito-desafio,
.dito-dado,
.dito-produto {
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dito-desafio:hover,
.dito-dado:hover,
.dito-produto:hover {
  transform: translateY(-2px);
  border-color: #39c881;
  box-shadow: 0 8px 24px rgba(13, 28, 66, 0.1);
}

/* O ícone do produto acompanha: o fundo cinza vira o verde claro da
   marca, ligando o card ao resto da identidade sem trocar de cor de
   texto (o contraste do nome do produto continua o mesmo). */
.dito-produto:hover .dito-produto__icone {
  background: #d7f4e6;
}

/* ── Fotos ───────────────────────────────────────────────────────
   Zoom discreto dentro de uma moldura que recorta. Sem a moldura o
   `scale` vazaria por cima do texto ao lado. */
.dito-case__foto {
  display: block;
  overflow: hidden;
  border-radius: 16px;
}

.elementor .dito-case__foto img {
  display: block;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dito-case__foto:hover img {
  transform: scale(1.03);
}

/* ── Faixa de resultados ─────────────────────────────────────────
   O número sobe um toque. É a única peça da faixa que pode reagir:
   legenda e divisória são referência de leitura. */
.dito-resultado:hover {
  transform: translateY(-2px);
}

/* ── Etiquetas do topo ───────────────────────────────────────────
   Fundo um passo mais claro no hover. Não são clicáveis, então o
   efeito é de vida, não de affordance: nada de cursor de mão. */
.dito-etiqueta:hover {
  background: #2b3a63;
}

/* ── Vídeo do depoimento ─────────────────────────────────────────
   O botão de play cobre a capa inteira: a área de clique é o vídeo
   todo, e não um alvo de 64px. */
.dito-depo-video__play,
.dito-depo-video__play:hover,
.dito-depo-video__play:focus,
.dito-depo-video__play:active {
  border: 0;
  background: transparent;
  color: #fff;
}

.dito-depo-video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: pointer;
}

.dito-depo-video__play-icone {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Triângulo em borda, e não caractere: não depende de fonte instalada
   e fica idêntico em qualquer sistema. */
.dito-depo-video__play-icone::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 18px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  transform: translateX(3px);
}

.dito-depo-video__play:hover .dito-depo-video__play-icone,
.dito-depo-video__play:focus-visible .dito-depo-video__play-icone {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.3);
}

.dito-depo-video__play:focus-visible {
  outline: 2px solid #39c881;
  outline-offset: -4px;
}

/* Tocando, a capa e o play saem de vista mas continuam no DOM: é o
   que permite voltar ao estado inicial sem recarregar a imagem. */
.dito-depo-video--tocando .dito-depo-video__play,
.dito-depo-video--tocando .dito-depo-video__capa {
  display: none;
}

.dito-depo-video__player {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Movimento reduzido ──────────────────────────────────────────
   Quem pediu menos movimento vê o resultado final, não o conteúdo
   escondido: `opacity` e `transform` voltam ao normal ANTES de as
   transições sumirem. */
@media (prefers-reduced-motion: reduce) {
  .dito-anima,
  .dito-anima--visivel {
    opacity: 1;
    transform: none;
  }

  .dito-anima,
  .dito-desafio,
  .dito-dado,
  .dito-produto,
  .dito-produto__icone,
  .dito-resultado,
  .dito-etiqueta,
  .dito-depo-video__play-icone,
  .elementor .dito-case__foto img {
    transition: none;
  }

  .dito-desafio:hover,
  .dito-dado:hover,
  .dito-produto:hover,
  .dito-resultado:hover {
    transform: none;
  }

  .dito-case__foto:hover img {
    transform: none;
  }

  .dito-depo-video__play:hover .dito-depo-video__play-icone {
    transform: none;
  }
}

/* ── Fonte do que o plugin renderiza ─────────────────────────────
   Chips, tags, listas de resultado, tópicos do desafio, cards de
   dados, produtos e etiquetas são HTML do plugin, não widget do
   Elementor — então não recebem a tipografia dos `__globals__`.

   Até aqui eles pegavam Poppins do `body_typography_font_family` do
   kit. Só que aquilo é ajuste GLOBAL do site: escrever no kit do
   cliente muda a fonte padrão de todas as páginas dele, e por isso
   saiu de lá. A fonte tem que vir daqui, aplicada só ao que é meu.

   `:where()` tem especificidade zero de propósito: a declaração é
   DIRETA no elemento, e declaração direta ganha de herança
   independente de especificidade. Assim ela veste tudo que é `dito-`
   sem disputar com nenhuma regra de componente. */
:where([class^="dito-"], [class*=" dito-"]) {
  font-family: Poppins, sans-serif;
}

/* ── Blindagem genérica contra !important ────────────────────────
   As regras acima protegem os componentes que EXISTEM hoje. Esta
   protege os que ainda não existem — e é ela que o canário do
   harness verifica.

   A especificidade é escolhida, não acidental:

     regra do site      button:not(.classe)          (0,1,1)
     esta blindagem     button[class^="dito-"]       (0,1,1)  empata,
                        e ganha por carregar depois
     componente         .dito-chip.dito-chip         (0,2,0)  ganha
                        das duas

   E ela vem ANTES dos componentes no arquivo, não depois. Os chips
   são <button type="button">, então `[type="button"][class^="dito-"]`
   também é (0,2,0) e EMPATA com o componente — empate se resolve por
   ordem. Genérico primeiro, específico depois: é a ordem que faz o
   desempate cair para o lado certo. Invertido, a blindagem apagava o
   raio e a largura dos próprios chips em produção.

   Ou seja: o site não pinta nada meu, e cada componente continua
   mandando no próprio visual. Um componente novo nasce neutro em
   vez de nascer verde-limão de largura cheia. */
/* SEM variante de estado de propósito. `button[class^="dito-"]:hover`
   seria (0,2,1) e passaria a ganhar dos próprios componentes, que são
   (0,2,0) — foi o que apagou o hover do chip, da seta e do dot na
   primeira tentativa. A regra hostil também não tem variante de estado,
   então não há o que neutralizar ali. */
button[class^="dito-"],
button[class*=" dito-"],
[type="button"][class^="dito-"],
[type="button"][class*=" dito-"] {
  width: auto !important;
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-align: inherit !important;
  white-space: normal !important;
}

/* =============================================================
   Blindagem forte — contra CSS de site que usa !important
   -------------------------------------------------------------
   A blindagem lá em cima empata em especificidade com o reset do
   tema e vence por ordem de carregamento. Isso basta contra um
   reset educado. NÃO basta contra o que existe de verdade em site
   de cliente: o dito.com.br tem, no style-custom.css do tema-filho,

     [type=button], [type=submit], button:not(.cmplz-manage-consent,…) {
       background: #00bd6a !important;  width: 100% !important;
       display: inline-block !important; border-radius: 8px !important;
       padding: .5rem 1rem !important;  ...13 propriedades no total
     }

   `!important` não se resolve por ordem: se resolve por
   especificidade ENTRE declarações !important. A regra deles é
   (0,1,1) — `button` mais o `:not()` de classe. Classe dobrada dá
   (0,2,0), que ganha.

   Por isso os valores aparecem repetidos aqui: não é redundância, é
   o único lugar onde eles sobrevivem num site hostil. Os cinco
   componentes abaixo são os que o navegador entrega como <button>.
   ============================================================= */

.dito-chip.dito-chip,
.dito-chip.dito-chip:hover,
.dito-chip.dito-chip:focus,
.dito-chip.dito-chip:active {
  display: inline-flex !important;
  width: auto !important;
  padding: 8px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: left !important;
}

.dito-chip.dito-chip {
  background: var(--e-global-color-background_white, #ffffff) !important;
  color: var(--e-global-color-text_on_light, #19223c) !important;
}

.dito-chip.dito-chip.is-ativo {
  background: var(--e-global-color-text_on_primary, #222f51) !important;
  color: var(--e-global-color-background_white, #ffffff) !important;
}

/* A borda VERDE, e não `border: 0`.
   -------------------------------------------------------------
   Os outros quatro componentes desta blindagem não têm borda no
   desenho, então neles `border: 0` é o valor certo. A seta tem: um
   anel de 1px na cor da marca, que é o que a separa do fundo navy
   do carrossel.

   Escrever `0` aqui apagava esse anel — a blindagem é (0,2,0) e a
   regra de componente, (0,1,0). Blindagem tem que declarar o valor
   do DESENHO, não um valor neutro: neutralizar o tema e apagar o
   próprio componente são coisas diferentes, e foi confundir as duas
   que já custou o raio dos chips, a cor do chevron e agora isto. */
.dito-seta.dito-seta,
.dito-seta.dito-seta:hover,
.dito-seta.dito-seta:focus,
.dito-seta.dito-seta:active {
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 1px solid var(--e-global-color-primary, #39c881) !important;
  border-radius: 50% !important;
}

/* `color` junto do `background`, e não só o fundo.
   -------------------------------------------------------------
   O chevron é um SVG com `stroke: currentColor`, então quem manda
   nele é o `color` do botão. A primeira versão desta blindagem
   declarou só o fundo — e aí o `color: inherit !important` da
   blindagem genérica, que é (0,1,1), passou a ganhar da regra de
   componente lá em cima, que não tem `!important`.

   O resultado dependia do contexto: branco no sandbox, #333 no site
   do cliente. Nenhum dos dois era o verde do desenho, e nenhum dos
   dois foi pego pela cascata, que só amostrava o FUNDO. */
.dito-seta.dito-seta {
  background: var(--e-global-color-secondary, #293f76) !important;
  color: var(--e-global-color-primary, #39c881) !important;
}


.dito-dot.dito-dot,
.dito-dot.dito-dot:hover,
.dito-dot.dito-dot:focus,
.dito-dot.dito-dot:active {
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
}

.dito-dot.dito-dot {
  background: var(--dot-inativo) !important;
}

/* `aria-current`, não `.is-ativo`.
 *
 * O JS marca o ponto selecionado com `aria-current="true"`; `.is-ativo`
 * é do CHIP de filtro e nunca aparece aqui. O seletor errado não
 * quebrava nada de forma visível — ele simplesmente NUNCA casava, e
 * então o `!important` do valor neutro logo acima prendia o ponto
 * selecionado no mesmo cinza dos outros. Nos três carrosséis da página
 * não havia diferença alguma entre selecionado e não selecionado.
 *
 * É a terceira vez que a blindagem forte apaga o próprio componente por
 * declarar o valor neutro e errar o estado. A cascata agora renderiza o
 * ponto com `aria-current` e confere o pixel. */
.dito-dot.dito-dot:hover,
.dito-dot.dito-dot[aria-current="true"] {
  background: var(--dot-ativo) !important;
}

/* Fechar do lightbox: quinta vez que a blindagem genérica apaga um
   componente. `width: auto !important` zerou a largura do botão (ele
   não tem conteúdo, só dois pseudo-elementos), `background:
   transparent` comeu o disco e `border-radius` sumiu — sobrou uma
   tirinha de 0x36 no canto da tela.
   O valor do DESENHO vai declarado aqui, como manda a casa. */
.dito-lightbox__fechar.dito-lightbox__fechar,
.dito-lightbox__fechar.dito-lightbox__fechar:focus,
.dito-lightbox__fechar.dito-lightbox__fechar:active {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.dito-lightbox__fechar.dito-lightbox__fechar:hover {
  background: rgba(255, 255, 255, 0.24) !important;
}

.dito-slide__play.dito-slide__play,
.dito-slide__play.dito-slide__play:hover,
.dito-slide__play.dito-slide__play:focus,
.dito-slide__play.dito-slide__play:active {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--e-global-color-background_surface, #222f51) !important;
}

.dito-depo-video__play.dito-depo-video__play,
.dito-depo-video__play.dito-depo-video__play:hover,
.dito-depo-video__play.dito-depo-video__play:focus,
.dito-depo-video__play.dito-depo-video__play:active {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* "Ver case completo" é <a>, não <button> — mas o mesmo raciocínio
   vale se o site decidir forçar links. */
.dito-case__link--botao.dito-case__link--botao {
  display: inline-flex !important;
  width: auto !important;
  background: var(--e-global-color-primary, #39c881) !important;
  color: var(--e-global-color-text_on_primary, #19223c) !important;
  border: 0 !important;
  /* O valor do DESENHO, não um valor neutro. Blindagem que declara
     "qualquer coisa contanto que o tema não mande" já apagou o raio do
     chip, a cor do glifo da seta e a borda da seta nesta base. */
  border-radius: 8px !important;
  padding: 12px 20px !important;
}

.dito-case__link--botao.dito-case__link--botao:hover,
.dito-case__link--botao.dito-case__link--botao:focus-visible,
.dito-case__link--botao.dito-case__link--botao:active {
  background: var(--e-global-color-primary_hover, #2fae6f) !important;
  color: var(--e-global-color-text_on_primary, #19223c) !important;
}