/* ==========================================================================
   Ellos Widgets — camada comum

   O que vale para todo widget: marcador de bloco vazio, avisos de
   configuração e os tons fixos de título. Carregado junto de qualquer
   componente.

   Regra: se algo aqui só serve a um widget, está no arquivo errado.
   ========================================================================== */

/* --- Tom fixo do título (exceções à regra de superfície) ------------------ */

/* Estas classes só entram quando alguém escolhe um tom explícito no editor.
   O padrão é não ter classe nenhuma: a cor vem da regra de superfície do
   design system, que é onde ela deve morar. */
.ew-title.ew-title--red   { color: var(--ec-red-500); }
.ew-title.ew-title--blue  { color: var(--ec-blue-900); }
.ew-title.ew-title--white { color: var(--ec-white); }
.ew-title.ew-title--ink   { color: var(--ec-ink-900); }

/* --- Marcação leve nos textos --------------------------------------------- */

/* **palavra** em texto corrido. Peso, não cor: caixa colorida no meio de um
   parágrafo vira ruído e disputa atenção com o título da seção.

   600 e não 700 porque o kit Poppins tem os dois, e 700 ao lado do corpo em
   400 lê como outro elemento, não como ênfase. */
.ew-strong { font-weight: 600; }

/* **palavra** em título vira <em class="ec-mark">. A tag é <em> porque o que
   está sendo marcado É ênfase — leitor de tela e busca leem isso, a caixa
   colorida é só a aparência. Mas <em> é itálico por padrão, e o display do
   sistema não tem itálico: o navegador simula inclinando o desenho, e a
   palavra sai torta dentro da caixa. O DS pinta a caixa e não trata a tag,
   então a correção mora aqui. */
.ec-scope .ec-mark { font-style: normal; }

/* A marca não é partida no meio.

   O Hero tem `overflow-wrap: break-word` no título como rede de segurança
   contra palavra que não cabe em tela estreita. Dentro da marca essa rede
   vira o problema: unindo "Farmácia~Popular" o autor criou uma palavra de
   dezesseis letras, e a rede a partiu em "POPULA" + "R" — com a caixa
   vermelha acompanhando o corte. Pedir para não quebrar e ser quebrado no
   meio da sílaba é o pior dos dois mundos.

   Aqui a marca volta a quebrar só entre palavras. Se nem assim couber, ela
   transborda — e transbordo é visível, diagnosticável e tem conserto óbvio
   (tirar o til ou encurtar o texto), enquanto uma sílaba partida parece
   defeito do sistema. */
.ec-scope .ec-mark {
  overflow-wrap: normal;
  word-break: normal;
}

/* Quebra manual em título display.

   O <br> herda a entrelinha do bloco, que em display é 0.92 — comprimida de
   propósito para as linhas automáticas. Zerar a do <br> faz a quebra manual
   cair no mesmo ritmo das outras; sem isso a linha quebrada à mão abre um vão
   maior que as demais, e o título fica torto por um motivo invisível. */
.ec-display br,
.ew-title br { line-height: 0; }

/* --- Alinhamento interno -------------------------------------------------- */

/* Para o fundo sangrar, o container do Elementor precisa ir a 100% — e aí ele
   deixa de segurar a largura do texto. Esta classe devolve o limite ao miolo
   do bloco, com o mesmo gutter do cabeçalho e do rodapé.

   Vai no elemento INTERNO, nunca no que pinta: no que pinta, cortaria a cor. */
.ew-inset {
  width: 100%;
  max-width: var(--ec-container);
  margin-inline: auto;
  padding-inline: var(--ec-gutter);
}

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

/* Sem conteúdo o widget não renderiza nada no site. No editor precisa de um
   alvo clicável, senão fica impossível selecioná-lo para configurar. */
.ew-empty { display: none; }

.elementor-editor-active .ew-empty {
  display: block;
  padding: var(--ec-sp-5);
  border: 1px dashed rgba(29, 40, 59, .3);
  border-radius: var(--ec-r-md);
  font-size: var(--ec-fs-sm);
  color: var(--ec-ink-400);
  text-align: center;
}
.ec-on-dark .ew-empty,
.elementor-editor-active .ec-on-dark .ew-empty {
  border-color: rgba(255, 255, 255, .4);
  color: rgba(255, 255, 255, .8);
}

/* --- Avisos de configuração ----------------------------------------------- */

/* Renderizados apenas em modo de edição. No site publicado não existe
   ninguém para corrigi-los. */
.ew-aviso {
  margin: var(--ec-sp-3) 0 0;
  padding: var(--ec-sp-3);
  border-radius: var(--ec-r-sm);
  background-color: rgba(212, 47, 46, .1);
  border: 1px dashed var(--ec-red-500);
  color: var(--ec-red-500);
  font-size: var(--ec-fs-xs);
  line-height: 1.4;
}

/* Em superfície colorida o vermelho sobre vermelho some. */
.ec-entry--blue .ew-aviso,
.ec-entry--green .ew-aviso,
.ec-entry--action .ew-aviso,
.ec-on-dark .ew-aviso {
  background-color: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .6);
  color: var(--ec-white);
}


/* ==========================================================================
   Blindagem contra estouro horizontal — 1.21.2

   Todo wrapper de widget é item de um container do Elementor, que é flex.
   Item de flex tem largura mínima automática igual ao min-content, e um
   título display em caixa alta tem min-content enorme: sem o zero explícito,
   o bloco fica da largura do conteúdo em vez da largura da tela, e a página
   ganha rolagem lateral.

   Alguns componentes já declaravam isso por conta própria. Aqui a regra
   passa a valer para todos, num lugar só — widget novo nasce protegido em
   vez de repetir a descoberta.
   ========================================================================== */
.ew-hero,
.ew-entries-block,
.ew-strip-block,
.ew-servicos-block,
.ew-depoimentos-block,
.ew-marcas-block,
.ew-faq-block,
.ew-gestao,
.ew-contato,
.ew-dna { min-width: 0; }


/* ==========================================================================
   RECUO LATERAL GARANTIDO — 1.21.4

   Até aqui o recuo lateral vinha do container do Elementor, e o padrão dele
   é zero. Em tela larga isso passava despercebido, porque a largura máxima
   do conteúdo já deixava margem sobrando; em tablet, onde o container ocupa
   a tela inteira e ainda não há largura máxima atuando, o texto encostava na
   borda. Medido em 600, 768, 834 e 1024: seis dos nove blocos com o conteúdo
   a zero pixel da borda.

   O recuo passa a ser do widget, como já era em Gestão e DNA. Vale o mesmo
   token do resto do sistema — `--ec-gutter`, que é clamp(1rem, 4vw, 2.5rem)
   — para que a margem do bloco case com a do cabeçalho e a do rodapé.

   Sobre duplicar: onde o elemento também recebe `.ew-inset`, as duas regras
   escrevem a MESMA propriedade no MESMO elemento, e padding não é
   cumulativo — vale a de maior especificidade, com valor idêntico. A
   duplicação real só aconteceria em aninhamento, e por isso o cabeçalho do
   carrossel zera o próprio recuo quando já está dentro de um invólucro
   recuado.
   ========================================================================== */

.ew-hero__grid,
.ew-entries-block > .ew-entries__head,
.ew-entries-block > .ec-entries,
.ec-strip__inner,
.ew-servicos__grid,
.ew-faq__inner,
.ew-carrossel__head,
.ew-carrossel__linhas { padding-inline: var(--ec-gutter); }

/* A faixa de ponta a ponta continua sangrando: é a receita do bloco, e o
   recuo aqui a anularia. O cabeçalho dela mantém o próprio. */
.ew-carrossel__faixa--total { padding-inline: 0; }

/* Cabeçalho já dentro de invólucro recuado não recua de novo. */
.ew-carrossel__head-wrap > .ew-carrossel__head,
.ew-inset > .ew-carrossel__head { padding-inline: 0; }