/* ==========================================================================
   Ellos Widgets — Faixa em movimento

   ec-marquee · ec-quote · ec-logo-row · ec-mkt-card

   Reescrito, não portado: o CSS do protótipo não estava disponível nesta
   sessão, só a marcação. Vale comparar lado a lado com o protótipo antes de
   dar por fechado — velocidade, altura dos cartões e tratamento das logos
   são os pontos onde a diferença apareceria.

   O laço: a pista tem DUAS cópias do grupo e anda até -50%. Para a emenda
   ser invisível, o espaço depois do último item de cada cópia tem que ser
   igual ao espaço entre os itens. Por isso o vão é `padding` no grupo e não
   `gap` na pista: com gap, a pista mede (2n-1) vãos e -50% cai no meio de
   um item.
   ========================================================================== */

.ec-marquee {
  --ec-mq-dur: 40s;
  --ec-mq-gap: var(--ec-sp-5);
  position: relative;
  overflow: hidden;
  min-width: 0;
  /* O overflow que faz o laço funcionar corta a sombra sólida dos cartões —
     era a "borda azul" que o protótipo já tinha corrigido com este respiro.
     Sem ele, a sombra de 6px some no recorte e sobra uma linha reta. */
  padding-block: var(--ec-sp-3);
}

.ec-marquee__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: ec-mq-x var(--ec-mq-dur) linear infinite;
  will-change: transform;
}

.ec-marquee__group {
  display: flex;
  align-items: stretch;
  gap: var(--ec-mq-gap);
  padding-right: var(--ec-mq-gap);
  padding-inline-start: var(--ec-sp-1);
}

@keyframes ec-mq-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Sentido inverso por keyframe próprio, não por `animation-direction`.

   A direção é uma longhand: qualquer folha que venha depois e redeclare a
   shorthand `animation` no mesmo elemento — outro plugin, um efeito de
   movimento do Elementor, um tema — zera a direção sem tocar em mais nada, e
   as duas faixas passam a correr para o mesmo lado sem erro nenhum em lugar
   algum. Com keyframe próprio, o sentido viaja no `animation-name`, que é o
   que estas regras também definem. */
.ec-marquee[data-dir="rtl"] .ec-marquee__track {
  animation-name: ec-mq-x-rev;
  animation-direction: normal;
}

@keyframes ec-mq-x-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Pausa no ponteiro e no foco do teclado — quem chegou pelo Tab precisa
   conseguir ler e clicar no que parou embaixo do cursor. */
.ec-marquee:hover .ec-marquee__track,
.ec-marquee:focus-within .ec-marquee__track { animation-play-state: paused; }

/* --- Vertical ------------------------------------------------------------- */

.ec-marquee--y {
  --ec-mq-dur: 32s;
  padding-block: 0;
  padding-inline: var(--ec-sp-2);
}

.ec-marquee--y .ec-marquee__track {
  flex-direction: column;
  width: auto;
  height: max-content;
  animation-name: ec-mq-y;
}

.ec-marquee--y .ec-marquee__group {
  flex-direction: column;
  padding-right: 0;
  padding-inline-start: 0;
  padding-block: var(--ec-sp-2) var(--ec-mq-gap);
}

@keyframes ec-mq-y {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* 0,3,0: precisa vencer `.ec-marquee--y .ec-marquee__track` (0,2,0), que
   define o keyframe vertical, e `.ec-marquee[data-dir="rtl"] ...` (0,2,0),
   que define o horizontal invertido. */
.ec-marquee--y[data-dir="rtl"] .ec-marquee__track {
  animation-name: ec-mq-y-rev;
  animation-direction: normal;
}

@keyframes ec-mq-y-rev {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

/* --- Desbotado nas pontas -------------------------------------------------- */

/* A faixa entra e sai da vista; corte seco denuncia a emenda. */
.ec-marquee--fade {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ec-marquee--y.ec-marquee--fade {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

/* --- Movimento reduzido ---------------------------------------------------- */

/* Sem animação a faixa vira uma régua estática, e o que passa da borda fica
   inalcançável. Devolver a rolagem manual é o que mantém o conteúdo acessível. */
@media (prefers-reduced-motion: reduce) {
  .ec-marquee { overflow-x: auto; }
  .ec-marquee--y { overflow-x: hidden; overflow-y: auto; }
  .ec-marquee__track { animation: none; }
  .ec-marquee--fade { -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   Logos
   ========================================================================== */

.ec-logo-row .ec-marquee__group { align-items: center; }

.ec-logo-item {
  /* Flex, não grid: com grid, `height: 100%` na imagem resolvia contra uma
     linha automática e voltava ao tamanho natural — medido, uma logo de
     120x600 chegou a 710px de altura dentro de uma caixa de 80px. */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* Dimensões por variável: os controles do widget escrevem estas, e o valor
     aqui é o do protótipo, para quem não mexeu em nada.

     min-width, não width, como no original. Logo deitada e logo em pé não
     pedem a mesma caixa: travar a largura obriga a deitada a encolher até
     virar um fio, que é o que aparecia como "corte". O teto existe para uma
     marca muito comprida não esticar a faixa inteira. */
  min-width: var(--ew-logo-w, 12rem);
  max-width: var(--ew-logo-max, 24rem);
  height: var(--ew-logo-h, 5rem);
  padding-inline: var(--ew-logo-p, var(--ec-sp-5));
  border-radius: var(--ec-r-md);
  /* Tratamento leve, como no protótipo: fundo lavanda com fio, sem sombra
     deslocada. A sombra sólida entra no hover, junto com o fundo branco. */
  background-color: var(--ec-blue-050);
  border: 1px solid rgba(1, 63, 182, .1);
  box-shadow: none;
  transition: background-color var(--ec-dur) var(--ec-ease),
              border-color var(--ec-dur) var(--ec-ease),
              box-shadow var(--ec-dur) var(--ec-ease);
}

.ec-logo-item:hover,
a.ec-logo-item:focus-visible {
  background-color: var(--ec-white);
  border-color: rgba(1, 63, 182, .3);
  box-shadow: 0 5px 0 0 rgba(1, 63, 182, .14);
}

/* A logo é dimensionada pela ALTURA, como no protótipo, que usava
   `background-size: auto 3.2rem`. A largura acompanha a proporção e a caixa
   cresce junto pelo min-width — é o que dá o mesmo peso óptico a marcas de
   formatos diferentes. `contain` mantém a proporção mesmo se algo de fora
   mexer nas duas dimensões.

   Escopado de propósito: 0,2,1. O Kit do Elementor escreve
   `.elementor-kit-N img { height: auto }`, que empata com `.ec-logo-item img`
   (0,1,1) e vence por vir depois na cascata — medido, a logo em pé voltava
   aos 710px de altura dentro de um card de 80px. Mesma lição do link com
   seta: quem disputa com o Kit precisa subir a especificidade. */
.ec-scope .ec-logo-item img {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--ew-logo-img-h, 4rem);
  /* Teto: valor alto no controle não faz a logo transbordar a moldura. */
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  /* Desarma o mínimo automático: sem isto a imagem empurra a caixa. */
  min-width: 0;
  min-height: 0;
  transition: filter var(--ec-dur) var(--ec-ease), opacity var(--ec-dur) var(--ec-ease);
}

/* Sem moldura: a logo solta sobre o fundo da seção. */
.ec-logo-row--nu .ec-logo-item {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Cor original é o padrão, como no protótipo. O cinza é opção: logos de
   origens diferentes brigam entre si em saturação, e o dessaturado empata
   todas — mas há marca cuja identidade não admite. */
.ec-logo-row--cinza .ec-logo-item img { filter: grayscale(1); opacity: .72; }
.ec-logo-row--cinza .ec-logo-item:hover img { filter: grayscale(0); opacity: 1; }

a.ec-logo-item:focus-visible {
  outline: 3px solid var(--ec-yellow-400);
  outline-offset: 3px;
}

/* Sobre fundo escuro o lavanda vira mancha. */
.ec-on-dark .ec-logo-item {
  background-color: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: none;
}

/* ==========================================================================
   Depoimento
   ========================================================================== */

.ec-quote {
  display: grid;
  gap: var(--ec-sp-4);
  align-content: start;
  flex: none;
  width: var(--ew-quote-w, min(24rem, 82vw));
  max-width: 82vw;
  margin: 0;
  padding: var(--ec-sp-6) var(--ec-sp-5) var(--ec-sp-5);
  border-radius: var(--ec-r-lg);
  background: var(--ec-white);
  /* Sombra sólida, como no protótipo — mas em cor cheia.

     A 12% ela virava uma faixa reta embaixo do cartão, que o olho lia como
     borda torta: não era o efeito que estava errado, era a força. O adesivo
     do DS depende de cor definida e de raio grande para ler como
     profundidade, e o raio pequeno somado à cor lavada era o que fazia o
     canto arredondado despontar sozinho. */
  box-shadow: 0 6px 0 0 rgba(1, 63, 182, .2);
}

.ec-on-dark .ec-quote { box-shadow: 0 6px 0 0 rgba(255, 255, 255, .22); }

.ec-quote__mark { color: var(--ec-blue-400); }
.ec-quote__mark svg { width: 2rem; height: 2rem; }

.ec-quote blockquote {
  margin: 0;
  font-size: var(--ec-fs-body);
  line-height: 1.6;
  font-style: normal;
}

.ec-quote figcaption {
  display: grid;
  gap: 2px;
  padding-top: var(--ec-sp-3);
  border-top: 1px solid rgba(29, 40, 59, .12);
  /* O navegador italiciza <figcaption> dentro de <figure> em alguns temas, e
     a assinatura em itálico não é o desenho aprovado. Declarado, não herdado. */
  font-style: normal;
}

.ec-quote figcaption b {
  font-size: var(--ec-fs-sm);
  font-style: normal;
}

.ec-quote figcaption span {
  font-size: var(--ec-fs-xs);
  font-style: normal;
  color: var(--ec-ink-400);
}

/* ==========================================================================
   Cartão de serviço
   ========================================================================== */

.ec-mkt-card {
  display: grid;
  gap: var(--ec-sp-2);
  flex: none;
  width: var(--ew-card-w, min(18rem, 78vw));
  max-width: 88vw;
  padding: var(--ec-sp-4);
  border-radius: var(--ec-r-md);
  background: var(--ec-white);
  box-shadow: 0 5px 0 0 rgba(1, 63, 182, .14);
}

/* SVG inline ignora font-size e cai em 300x150 sem dimensão explícita. */
.ec-mkt-card svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ec-blue-600);
}

.ec-mkt-card b {
  font-size: var(--ec-fs-sm);
  line-height: 1.25;
  color: var(--ec-ink-900);
}

.ec-mkt-card span {
  font-size: var(--ec-fs-xs);
  line-height: 1.45;
  color: var(--ec-ink-400);
}

/* ==========================================================================
   Wrappers dos widgets
   ========================================================================== */

.ew-marcas-block,
.ew-depoimentos-block,
.ew-servicos-block { min-width: 0; }

/* Miolo do bloco: recebe .ew-inset quando o container é aberto para o fundo
   sangrar. */
.ew-marcas__inner,
.ew-depoimentos__inner { min-width: 0; }

/* Faixa de ponta a ponta: o cabeçalho continua na margem do site e só a
   pista sangra. Sem margem inferior no cabeçalho aqui — ela já vem de
   .ew-carrossel__head. */
.ew-carrossel__faixa--total { width: 100%; }
.ew-carrossel__head-wrap { min-width: 0; }

/* Margens explícitas em vez de .ec-flow: o seletor filho do flow vence a
   classe do elemento. */
.ew-carrossel__head { margin-bottom: var(--ec-sp-6); max-width: 44rem; }
.ew-carrossel__head .ec-eyebrow { margin: 0 0 var(--ec-sp-2); }
.ew-carrossel__head .ew-title { margin: 0; }
.ew-carrossel__head .ec-lead { margin: var(--ec-sp-3) 0 0; }

.ew-carrossel__head--centro { margin-inline: auto; text-align: center; }

/* Duas faixas empilhadas, sentidos opostos. */
.ew-carrossel__linhas { display: grid; gap: var(--ec-sp-4); }

/* --- Bloco de serviços em duas colunas ------------------------------------ */

.ew-servicos__grid {
  display: grid;
  gap: var(--ec-sp-6);
  align-items: center;
}

@media (min-width: 940px) {
  .ew-servicos__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.ew-servicos__copy { min-width: 0; display: grid; gap: var(--ec-sp-4); }
.ew-servicos__copy .ew-title { margin: 0; }
.ew-servicos__copy .ec-lead { margin: 0; }

/* Duas colunas de cartões subindo em sentidos opostos, com altura fixa —
   sem ela a faixa vertical cresce até a altura do conteúdo repetido. */
.ew-servicos__pista {
  display: grid;
  grid-template-columns: minmax(0, var(--ew-col-w, 1fr));
  justify-content: center;
  gap: var(--ec-sp-4);
  height: var(--ew-pista-h, 100%);
  min-height: 24rem;
  align-items: stretch;
}

@media (min-width: 560px) {
  .ew-servicos__pista { grid-template-columns: repeat(2, minmax(0, var(--ew-col-w, 1fr))); }
}

.ew-servicos__pista .ec-marquee { height: 100%; }

/* O cartão preenche a coluna, e quem tem largura é a COLUNA.

   Antes havia aqui `width: auto` no cartão, com especificidade 0,2,0: isso
   vencia o `width: var(--ew-card-w)` do próprio componente (0,1,0) e deixava
   o controle de largura sem efeito nenhum dentro deste bloco — mexer no
   slider não mudava um pixel. */
.ew-servicos__pista .ec-mkt-card { width: 100%; }


/* ==========================================================================
   CELULAR — 1.21.1

   Duas correções vindas de medição, não de impressão.

   1. A pista de serviços media 4.760px de altura em 390px de tela: doze
      telas de rolagem automática dentro de uma página que já rola. A causa é
      `height: 100%` numa pista cujo pai não tem altura definida — o valor
      não resolve e a caixa cresce até o conteúdo repetido. Em coluna única a
      faixa vertical não tem o que fazer: ela existe para preencher a altura
      de uma seção que, no celular, não existe.

      A saída é virar UMA faixa horizontal. É o mesmo gesto dos outros
      carrosséis da página, e a altura passa a ser a do cartão.

   2. O cartão de depoimento ocupava 295px numa tela de 360, com 337px de
      altura: metade da tela para um depoimento, e sem o vizinho espiando
      não há sinal de que a faixa anda. Menor, e o próximo aparece.
   -------------------------------------------------------------------------- */

@media (max-width: 559.98px) {

  /* --- Serviços: uma faixa horizontal --- */

  /* min-width: 0 junto com display:block, e não por elegância: a pista é
     item de grid, e item de grid tem tamanho mínimo automático igual ao
     min-content. Sem o zero, o min-content da faixa horizontal — que é a
     pista inteira, 4.760px — vira a largura da coluna e a página ganha
     rolagem lateral. A versão em grid escondia isso atrás do minmax(0,…). */
  .ew-servicos__pista {
    display: block;
    min-width: 0;
    height: auto;
    min-height: 0;
  }

  /* A segunda faixa sai: duas faixas horizontais empilhadas no celular
     dobram a altura sem dobrar a informação — os cartões são os mesmos. */
  .ew-servicos__pista .ec-marquee--y + .ec-marquee--y { display: none; }

  .ew-servicos__pista .ec-marquee--y {
    height: auto;
    padding-inline: 0;
    padding-block: var(--ec-sp-3);
  }

  /* 0,3,0 para vencer `.ec-marquee--y .ec-marquee__track` (0,2,0), que é
     quem define a coluna e o keyframe vertical. */
  .ew-servicos__pista .ec-marquee--y .ec-marquee__track {
    flex-direction: row;
    width: max-content;
    height: auto;
    animation-name: ec-mq-x;
  }

  /* 0,4,0: o sentido inverso continua viajando no animation-name, nunca em
     animation-direction. */
  .ew-servicos__pista .ec-marquee--y[data-dir="rtl"] .ec-marquee__track {
    animation-name: ec-mq-x-rev;
  }

  .ew-servicos__pista .ec-marquee--y .ec-marquee__group {
    flex-direction: row;
    padding-block: 0;
    padding-right: var(--ec-mq-gap);
    padding-inline-start: var(--ec-sp-1);
  }

  /* Mesma especificidade da regra que manda o cartão preencher a coluna
     (0,2,0), e vem depois: aqui não há coluna para preencher. */
  .ew-servicos__pista .ec-mkt-card { width: min(15rem, 68vw); }

  .ew-servicos__pista .ec-marquee--y.ec-marquee--fade {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

  /* --- Depoimento: cabe na tela e deixa o próximo espiar --- */

  .ec-quote {
    width: var(--ew-quote-w, min(17rem, 72vw));
    padding: var(--ec-sp-4);
    gap: var(--ec-sp-3);
  }
  .ec-quote blockquote { font-size: var(--ec-fs-sm); line-height: 1.55; }
  .ec-quote__mark svg { width: 1.5rem; height: 1.5rem; }
}