/* ==========================================================================
   Ellos Widgets — componente Entradas
   ec-entries · ec-entry · ec-steps · ec-link

   Consolidação das camadas 2, 4, 5 e 8 do protótipo em um arquivo só.
   No protótipo a mesma classe era tocada em quatro lugares diferentes, o que
   causou o bug do hover que apagava as logos. Aqui cada componente tem um
   arquivo e uma declaração por seletor.

   Depende dos tokens de ellos-ds.css.

   As variáveis internas usam prefixo --ew-, não --_. O design system usa
   --_bg e --_fg dentro de .ec-btn; um botão dentro do card herdaria os
   valores do card em qualquer variante que não redeclare os dois. Hoje
   todas redeclaram, então nada quebra — mas é uma armadilha, não um projeto.
   ========================================================================== */

.ec-entries {
  display: grid;
  gap: var(--ec-sp-5);
  align-items: start;
  grid-template-columns: 1fr;
}

/* O número de colunas é definido pelo widget via --ew-cols, com teto de 4.
   O grid nunca ultrapassa o número real de cards. */
@media (min-width: 760px) {
  .ec-entries { grid-template-columns: repeat(min(var(--ew-cols, 3), 2), 1fr); }
}
@media (min-width: 1040px) {
  .ec-entries { grid-template-columns: repeat(var(--ew-cols, 3), 1fr); }
}

/* Alturas iguais, quando escolhido no editor.

   O padrão continua sendo align-items: start, e a razão é o acordeão: um card
   com etapas abertas é muito mais alto que os vizinhos, e esticar os outros
   até ele deixaria dois cards com um vão enorme embaixo. Onde os cards são
   parecidos — só ícone, título e texto — a linha desalinhada é que parece
   descuido, e aí esta classe entra.

   Mesma especificidade da regra acima; vence por vir depois. Vale para a
   grade e para a pista do carrossel, que também é flex. */
.ec-entries--stretch { align-items: stretch; }

/* --- Card ---------------------------------------------------------------- */

.ec-entry {
  --ew-bg: var(--ec-white);
  --ew-fg: var(--ec-ink-900);
  --ew-muted: var(--ec-ink-400);
  --ew-rule: rgba(29, 40, 59, .14);
  --ew-shadow: var(--ec-blue-600);

  display: flex;
  flex-direction: column;
  gap: var(--ec-sp-4);
  background-color: var(--ew-bg);
  color: var(--ew-fg);
  text-decoration: none;
  border-radius: var(--ec-r-lg);
  padding: var(--ec-sp-6) var(--ec-sp-5) var(--ec-sp-5);
  box-shadow: 0 8px 0 0 var(--ew-shadow);
  transition: transform var(--ec-dur) var(--ec-ease),
              box-shadow var(--ec-dur) var(--ec-ease);
}

/* Regra 3 do sistema: hover é elevação e assentamento da sombra sólida.
   Sem rotação, sem escala. E background-color, nunca o atalho background:
   o atalho zera background-image de quem herdou. */
.ec-entry:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 0 0 var(--ew-shadow);
}

.ec-entry--blue {
  --ew-bg: var(--ec-blue-600);
  --ew-fg: var(--ec-white);
  --ew-muted: rgba(255, 255, 255, .88);
  --ew-rule: rgba(255, 255, 255, .28);
  --ew-shadow: var(--ec-blue-900);
}
.ec-entry--green {
  --ew-bg: var(--ec-green-500);
  --ew-fg: var(--ec-white);
  --ew-muted: rgba(255, 255, 255, .9);
  --ew-rule: rgba(255, 255, 255, .3);
  --ew-shadow: var(--ec-green-700);
}
.ec-entry--action {
  --ew-bg: var(--ec-red-500);
  --ew-fg: var(--ec-white);
  --ew-muted: rgba(255, 255, 255, .86);
  --ew-rule: rgba(255, 255, 255, .28);
  --ew-shadow: var(--ec-red-700);
}

/* --- Ícone --------------------------------------------------------------- */

.ec-entry__icon {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  border-radius: var(--ec-r-md);
  background-color: var(--ec-blue-050);
  color: var(--ec-blue-600);
}
.ec-entry--blue .ec-entry__icon,
.ec-entry--green .ec-entry__icon,
.ec-entry--action .ec-entry__icon {
  background-color: rgba(255, 255, 255, .17);
  color: var(--ec-white);
}
/* Dimensão explícita: SVG inline é elemento substituído e ignora font-size. */
.ec-entry__icon svg { width: 1.75rem; height: 1.75rem; }

/* --- Texto --------------------------------------------------------------- */

.ec-entry__head { display: grid; gap: var(--ec-sp-1); }

.ec-entry__title {
  font-family: var(--ec-font-display);
  font-size: var(--ec-fs-d4);
  font-weight: 400; /* o kit tem só o peso 400; acima disso o navegador simula negrito */
  line-height: 1.08;
  letter-spacing: var(--ec-ls-display);
  text-transform: uppercase;
  margin: 0;
}

.ec-entry__sub {
  margin: 0;
  font-size: var(--ec-fs-sm);
  font-weight: 600;
  color: var(--ec-blue-600);
}
.ec-entry--blue .ec-entry__sub,
.ec-entry--green .ec-entry__sub { color: rgba(255, 255, 255, .92); }
.ec-entry--action .ec-entry__sub { color: var(--ec-white); }

.ec-entry__text {
  margin: 0;
  font-size: var(--ec-fs-sm);
  line-height: 1.6;
  color: var(--ew-muted);
}

.ec-entry__foot { margin-top: auto; padding-top: var(--ec-sp-2); }

/* --- Link de continuação (card inteiro clicável) -------------------------- */

.ec-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ec-sp-2);
  font-size: var(--ec-fs-sm);
  font-weight: 600;
  color: var(--ec-blue-600);
}
.ec-link svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform var(--ec-dur) var(--ec-ease);
}
.ec-entry:hover .ec-link svg { transform: translateX(3px); }

.ec-entry--blue .ec-link,
.ec-entry--green .ec-link,
.ec-entry--action .ec-link { color: currentColor; }

/* Com a ação "Link com seta" o rodapé é um <a> de verdade, e não mais um
   <span> dentro do card clicável. Isso acorda duas regras de fora:

   o Kit do Elementor (`.elementor-kit-N a`, 0,2,0) pinta e sublinha;
   o DS blinda com `.ec-scope a.ec-link.ec-link` (0,3,1) e manda herdar.

   Herdar é o certo em card colorido, e errado em card branco — ali a seta
   tem que ser azul. Estas regras sobem para 0,4,1 e chegam depois do DS na
   cascata, já que ellos-c-entries depende dele. */
.ec-scope .ec-entry a.ec-link.ec-link {
  color: var(--ec-blue-600);
  text-decoration: none;
}

.ec-scope .ec-entry--blue a.ec-link.ec-link,
.ec-scope .ec-entry--green a.ec-link.ec-link,
.ec-scope .ec-entry--action a.ec-link.ec-link { color: currentColor; }

/* O card clicável recebe foco no próprio card; o link solto precisa do seu. */
.ec-entry a.ec-link:focus-visible {
  outline: 3px solid var(--ec-yellow-400);
  outline-offset: 3px;
  border-radius: var(--ec-r-sm);
}

.ec-entry a.ec-link:hover svg { transform: translateX(3px); }

/* --- Etapas em acordeão --------------------------------------------------- */

.ec-steps {
  border-top: 1px solid var(--ew-rule);
  padding-top: var(--ec-sp-3);
}
.ec-steps > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ec-sp-3);
  cursor: pointer;
  list-style: none;
  font-size: var(--ec-fs-sm);
  font-weight: 600;
  padding-block: var(--ec-sp-1);
}
.ec-steps > summary::-webkit-details-marker { display: none; }
.ec-steps > summary:focus-visible {
  outline: 3px solid var(--ec-yellow-400);
  outline-offset: 3px;
  border-radius: var(--ec-r-sm);
}

.ec-steps__caret {
  flex: none;
  display: inline-grid;
  transition: transform var(--ec-dur) var(--ec-ease);
}
.ec-steps__caret svg { width: 1.15rem; height: 1.15rem; }
.ec-steps[open] .ec-steps__caret { transform: rotate(180deg); }

.ec-steps__list {
  list-style: none;
  margin: var(--ec-sp-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ec-sp-3);
}
.ec-steps__list li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--ec-sp-3);
  align-items: start;
}
.ec-steps__n {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--ec-r-pill);
  background-color: var(--ec-blue-600);
  color: var(--ec-white);
  font-size: var(--ec-fs-xs);
  font-weight: 700;
  line-height: 1;
}
/* Em card colorido a pílula precisa inverter, senão azul sobre azul some. */
.ec-entry--blue .ec-steps__n,
.ec-entry--green .ec-steps__n,
.ec-entry--action .ec-steps__n {
  background-color: var(--ec-white);
  color: var(--ew-bg);
}

.ec-steps__t {
  margin: 0;
  font-size: var(--ec-fs-sm);
  font-weight: 600;
  line-height: 1.3;
}
.ec-steps__d {
  margin: 2px 0 0;
  font-size: var(--ec-fs-xs);
  line-height: 1.5;
  color: var(--ew-muted);
}

/* --- Telas estreitas ------------------------------------------------------ */

@media (max-width: 560px) {
  .ec-entry { padding: var(--ec-sp-5) var(--ec-sp-4) var(--ec-sp-4); }
}

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

@media (prefers-reduced-motion: reduce) {
  .ec-entry,
  .ec-steps__caret,
  .ec-link svg { transition: none; }
  .ec-entry:hover { transform: none; }
  .ec-entry:hover .ec-link svg { transform: none; }
}

/* --- Bloco -------------------------------------------------------------- */

/* Wrapper do widget. Existe para carregar as classes de superfície e
   espaçamento; min-width: 0 evita que o conteúdo force largura maior que a
   coluna quando o bloco estiver dentro de um grid. */
.ew-entries-block { min-width: 0; }

/* --- Miolo ---------------------------------------------------------------- */

/* Camada interna, entre o que pinta e o conteúdo. Existe para o controle de
   Alinhamento: `ew-inset` (base.css) limita a largura e devolve o gutter, e
   precisa ficar DENTRO do elemento que pinta — aplicado no que pinta, cortaria
   a cor no meio da tela.

   Sem classe de alinhamento ela é um <div> transparente, e é assim que
   permanece em toda página já publicada: o padrão do controle é "Do container
   do Elementor", que não acrescenta nada. */
.ew-entries__inner { min-width: 0; }

/* --- Cabeçalho do bloco --------------------------------------------------- */

/* Margens explícitas em vez de .ec-flow: o seletor filho do flow
   (.ec-flow > * + *) tem especificidade maior que a classe do elemento e
   venceria os ajustes daqui. No protótipo isso estava encoberto por style
   inline em cada tag. */
.ew-entries__head { max-width: 46rem; margin-bottom: var(--ec-sp-7); }
.ew-entries__head > .ec-eyebrow { margin: 0 0 var(--ec-sp-3); }
.ew-entries__head > .ew-entries__title { margin: 0; }
.ew-entries__head > .ew-entries__lead { margin: var(--ec-sp-4) 0 0; }

/* --- Chamada final -------------------------------------------------------- */

/* Fecho da seção, dentro do wrapper do widget. Não é a Faixa de CTA: aquela é
   um bloco de largura inteira com respiro próprio, feito para SEPARAR seções.
   Esta pertence à seção e herda o fundo dela.

   Texto à esquerda, botão à direita; empilha quando não cabe. O botão vem
   antes no encolhimento porque `flex-wrap` quebra a linha inteira, e um botão
   de largura natural embaixo do texto é a leitura certa no celular. */
.ew-entries__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ec-sp-5);
  margin-top: var(--ec-sp-7);
}

/* Sem texto sobra só o botão. Alinhado à esquerda, no eixo do resto do bloco —
   botão sozinho centralizado parece um erro de layout. */
.ew-entries__cta > .ew-entries__cta-btn:only-child { margin-right: auto; }

.ew-entries__cta-text {
  margin: 0;
  font-size: var(--ec-fs-lead);
  line-height: 1.35;
  max-width: 42ch;
  min-width: 0; /* item de flex com texto longo não pode ditar a largura mínima */
}

/* --- Variante Discreto ---------------------------------------------------- */

/* Uma linha e ar. O fecho não deve competir com os cards que acabou de
   fechar; se pintar de cor, a seção passa a ter dois centros de atenção. */
.ew-entries__cta:not(.ew-entries__cta--painel) {
  border-top: 1px solid rgba(29, 40, 59, .14);
  padding-top: var(--ec-sp-6);
}
.ec-on-dark .ew-entries__cta:not(.ew-entries__cta--painel) {
  border-top-color: rgba(255, 255, 255, .24);
}

/* --- Variante Painel ------------------------------------------------------ */

/* Bloco pintado com o gradiente de marca. Para quando a seção está em fundo
   branco e o fecho precisa de peso próprio. Em seção já colorida, prefira o
   discreto: cor sobre cor achata os dois. */
.ew-entries__cta--painel {
  padding: var(--ec-sp-6);
  border-radius: var(--ec-r-lg);
  background-image: var(--ec-grad-brand-h);
  color: var(--ec-white);
}

/* O painel pinta o próprio fundo, então não pode herdar a borda do discreto
   nem o padding-top que o acompanha. */
.ew-entries__cta--painel { border-top: 0; }

@media (max-width: 560px) {
  .ew-entries__cta--painel { padding: var(--ec-sp-5); }
  .ew-entries__cta-btn { width: 100%; justify-content: center; }
}

/* --- Esquema escuro ------------------------------------------------------- */

/* .ec-on-dark (design system) resolve título, apoio e sobretítulo. Falta o
   card branco, que sobre fundo escuro precisa de sombra própria: a azul do
   padrão some no escuro. */
.ec-on-dark .ec-entry { --ew-shadow: var(--ec-blue-400); }

/* ==========================================================================
   Carrossel — ew-carousel · ec-entries--track
   Acrescentado na 1.32.0. A grade acima continua sendo o padrão.

   Prefixo ew-, e não ec-, por um motivo concreto: o design system já tem
   .ec-carousel__nav, e ali a classe é o CONTÊINER dos botões
   (display: flex; justify-content: flex-end; margin-top). Aqui a mesma
   classe era o próprio botão redondo. As duas declarações têm a mesma
   especificidade, esta folha chega depois e vencia o display — mas
   justify-content e margin-top não eram redeclarados e vazavam: o ícone
   ia para a borda direita do botão e a barra ganhava um respiro fantasma.

   Regra que fica: o namespace ec- pertence ao design system. Componente
   de widget que precisa de nome próprio usa ew-.

   A pista é um contêiner de rolagem nativo com scroll-snap. Não há transform,
   não há largura calculada em JS, não há clone de slide. O navegador já sabe
   rolar: arrasto no toque, roda horizontal, barra de rolagem, Tab entrando
   nos cards e leitor de tela lendo na ordem do DOM saem de graça. O script
   só desenha os controles e marca a posição.

   Duas decisões de UX estão aqui e não no JS:

   1. A espiada. O último card visível é cortado de propósito. Card cortado
      é o único indício de "há mais para o lado" que a pessoa lê sem
      instrução; pista que termina rente à borda parece conteúdo completo.

   2. O piso do min(). Se houver menos cards que o número visível, a conta
      cai para a contagem real e a pista deixa de rolar. Sem isso, três
      cards num carrossel de três deixariam um vão à direita — espaço morto
      que parece bug de layout.
   ========================================================================== */

.ew-carousel { min-width: 0; }

/* --- Pista ---------------------------------------------------------------- */

.ec-entries--track {
  /* --ew-per-lg  cards por vez em tela grande, escrito pelo widget (2 ou 3)
     --ew-count   total de cards, escrito pelo widget
     --ew-per     valor em uso no ponto de quebra atual
     --ew-fit     divisor real: o menor entre "cards por vez + espiada" e o
                  total existente

     O .2 é a espiada. Somado ao divisor, sobra sempre uma fatia do próximo
     card na borda direita.

     O min() com --ew-count é o que impede o espaço morto: com três cards num
     carrossel de três, o divisor cai para 3 exato, os cards preenchem a
     largura inteira e a pista deixa de rolar. Sem ele sobraria um vão à
     direita que parece defeito de layout.

     O widget escreve --ew-per-lg, e não --ew-per: estilo inline vence media
     query, e o valor de tela grande vazaria para o celular. */
  --ew-per: .95;
  --ew-fit: min(calc(var(--ew-per) + .2), var(--ew-count, 3));

  display: flex;
  grid-template-columns: none; /* neutraliza a regra de grade herdada */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain; /* rolar até o fim não puxa a página junto */

  /* Contêiner com overflow-x recorta na vertical mesmo com overflow-y hidden.
     O card sobe 4px no hover e apoia uma sombra sólida de 8px: sem folga
     aqui, os dois somem cortados na borda inferior. */
  padding-block: 6px 20px;

  /* Espaço para o anel de foco do primeiro e do último card, sem alterar a
     medida da rolagem.

     O scroll-padding tem que acompanhar o padding, senão o primeiro card
     encosta em scrollLeft 4 e não em 0 — a pista nasce quatro pixels
     rolada, e a seta "anterior" acorda habilitada apontando para lugar
     nenhum. */
  padding-inline: 4px;
  margin-inline: -4px;
  scroll-padding-inline: 4px;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ec-entries--track::-webkit-scrollbar { display: none; }

/* Largura do card: a pista menos os vãos que ficam entre os cards visíveis,
   dividida pelo divisor. Os vãos são (divisor − 1); errar essa conta é o que
   faz a pista transbordar exatamente uma medida de vão quando ela deveria
   encaixar certo. */
.ec-entries--track > * {
  flex: 0 0 calc(
    (100% - (var(--ew-fit) - 1) * var(--ec-sp-5)) / var(--ew-fit)
  );
  scroll-snap-align: start;
}

/* A pista recebe foco de teclado para as setas rolarem. Foco tem que ser
   visível: contêiner que rola sem indicar onde está o foco é armadilha. */
.ec-entries--track:focus-visible {
  outline: 3px solid var(--ec-yellow-400);
  outline-offset: 2px;
  border-radius: var(--ec-r-lg);
}

/* Celular: um card por vez, sempre — a escolha do widget vale só para tela
   grande. A espiada continua, e é aqui que ela mais trabalha: não há seta
   grande nem espaço para dica escrita. */

@media (min-width: 760px) {
  .ec-entries--track { --ew-per: 2; }
}

@media (min-width: 1040px) {
  .ec-entries--track { --ew-per: var(--ew-per-lg, 3); }
}

/* --- Barra de controles --------------------------------------------------- */

/* Abaixo dos cards, nunca por cima. Seta sobreposta ao conteúdo cobre texto,
   erra o alvo no toque e desaparece em card colorido. O JS remove o [hidden]
   só quando há o que rolar — botão que não faz nada é pior que botão ausente. */
.ew-carousel__bar {
  display: flex;
  align-items: center;
  gap: var(--ec-sp-4);
  margin-top: var(--ec-sp-4);
}
.ew-carousel__bar[hidden] { display: none; }

.ew-carousel__nav {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--ec-r-pill);
  background-color: var(--ec-blue-600);
  color: var(--ec-white);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--ec-dur) var(--ec-ease),
              transform var(--ec-dur) var(--ec-ease),
              opacity var(--ec-dur) var(--ec-ease);
}
.ew-carousel__nav svg { width: 1.25rem; height: 1.25rem; }

/* Só existe o ícone de seta à direita no catálogo; a anterior é a mesma
   girada. Um SVG a menos para manter em dia. */
.ew-carousel__nav[data-ew-prev] svg { transform: rotate(180deg); }

.ew-carousel__nav:hover { background-color: var(--ec-blue-900); }
.ew-carousel__nav:active { transform: scale(.94); }
.ew-carousel__nav:focus-visible {
  outline: 3px solid var(--ec-yellow-400);
  outline-offset: 3px;
}

/* Ponta da pista: o botão continua no lugar, apagado. Botão que some faz a
   barra pular de largura e o outro botão trocar de posição debaixo do dedo. */
.ew-carousel__nav[disabled] {
  opacity: .32;
  cursor: default;
  background-color: var(--ec-blue-600);
}

/* --- Indicador de posição ------------------------------------------------- */

.ew-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--ec-sp-2);
  flex-wrap: wrap;
}

/* O alvo de toque tem 44px; a marca desenhada é menor e mora no ::after.
   Bolinha de 8px é impossível de acertar com o polegar. */
.ew-carousel__dot {
  position: relative;
  width: 1.5rem;
  height: 2.75rem;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.ew-carousel__dot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: .5rem;
  height: .5rem;
  border-radius: var(--ec-r-pill);
  background-color: rgba(29, 40, 59, .22);
  transition: width var(--ec-dur) var(--ec-ease),
              background-color var(--ec-dur) var(--ec-ease);
}
.ew-carousel__dot:hover::after { background-color: rgba(29, 40, 59, .42); }

.ew-carousel__dot.is-on::after {
  width: 1.5rem;
  background-color: var(--ec-blue-600);
}
.ew-carousel__dot:focus-visible {
  outline: 3px solid var(--ec-yellow-400);
  outline-offset: -6px;
  border-radius: var(--ec-r-sm);
}

/* --- Sobre fundo escuro --------------------------------------------------- */

.ec-on-dark .ew-carousel__nav {
  background-color: var(--ec-white);
  color: var(--ec-blue-900);
}
.ec-on-dark .ew-carousel__nav:hover { background-color: rgba(255, 255, 255, .84); }
.ec-on-dark .ew-carousel__dot::after { background-color: rgba(255, 255, 255, .32); }
.ec-on-dark .ew-carousel__dot:hover::after { background-color: rgba(255, 255, 255, .55); }
.ec-on-dark .ew-carousel__dot.is-on::after { background-color: var(--ec-white); }

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

/* Rolagem suave é animação. Quem pediu menos movimento recebe o salto seco:
   o destino é o mesmo, sem o deslocamento no meio do caminho. */
@media (prefers-reduced-motion: reduce) {
  .ec-entries--track { scroll-behavior: auto; }
  .ew-carousel__nav,
  .ew-carousel__dot::after { transition: none; }
  .ew-carousel__nav:active { transform: none; }
}