/* =========================================================
   Success — Ajustes finos (custom.css)
   Carregado por último, sobrepõe o CSS do Elementor sem
   alterar a base pixel-exata. Cada bloco é um pedido da cliente.
   ========================================================= */

/* ---------------------------------------------------------
   FIX 1 — Rolagem lateral (horizontal) + barra branca (vertical)
   Causa: a imagem decorativa (círculos concêntricos) da seção
   do CTA final vaza ~300px à direita E ~34px abaixo do navy,
   deixando o fundo branco do body aparecer no rodapé.
   - overflow-x: clip no wrapper corta o excesso horizontal
     (sem criar container de scroll, diferente de hidden).
   - overflow: clip na própria seção do CTA contém a decoração
     nos dois eixos → some a barra branca do rodapé.
   --------------------------------------------------------- */
html,
body {
  overflow-x: clip;
}
.elementor-8 {
  overflow-x: clip;
}
.elementor-element-c968f66 {
  overflow: clip;
}

/* ---------------------------------------------------------
   FIX 2 — Respiro entre "Quem está por trás da Success?"
   e "Depoimentos" (desktop 1c + mobile 2c)
   Adiciona espaço no topo da seção de Depoimentos (9fab37f).
   --------------------------------------------------------- */
.elementor-element-9fab37f {
  padding-top: 90px !important;
}

/* ---------------------------------------------------------
   FIX 3 — Respiro antes de "Um processo leve, prático e
   transformador" no MOBILE (2a)
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-element-905e90e {
    padding-top: 56px !important;
  }

  /* respiro do Fix 2 um pouco menor no mobile */
  .elementor-element-9fab37f {
    padding-top: 56px !important;
  }
}

/* ---------------------------------------------------------
   FIX 4 — 4ª alternativa de serviço: "Presença após o processo"
   (parceria Success x Tuliu, link p/ /presenca-digital/).
   Os serviços são ALTERNATIVAS, não um passo a passo: por isso
   a fileira passa de 3 para 4 colunas e a Presença fica no mesmo
   status visual dos outros (card com header colorido sobre o
   fundo navy da seção). Header rosa (#F4CBDE) = 4ª cor da marca.
   --------------------------------------------------------- */
/* especificidade igual à do Elementor (.elementor-8 .elementor-element.elementor-element-…) */
.elementor-8 .elementor-element.elementor-element-aacefa5 {
  --e-con-grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .elementor-8 .elementor-element.elementor-element-aacefa5 {
    --e-con-grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .elementor-8 .elementor-element.elementor-element-aacefa5 {
    --e-con-grid-template-columns: repeat(1, 1fr);
  }
}
.su-alt-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--e-global-color-1b598eb, #fff);
  border-radius: 20px;
  overflow: hidden;
}
.su-alt-head {
  background: #F4CBDE;
  color: #293344;
  font-family: "Poppins", Sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  padding: 25px;
}
.su-alt-sub {
  font-family: "Poppins", Sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  padding: 20px 20px 0;
}
.su-alt-body {
  font-family: "Poppins", Sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  padding: 8px 20px 16px;
}
.su-alt-link {
  font-family: "Poppins", Sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #C0B793;
  text-decoration: none;
  padding: 0 20px 22px;
  margin-top: auto;
  display: inline-block;
}
.su-alt-link:hover {
  color: #fff;
}

/* ---------------------------------------------------------
   FIX 5 — Acabamento da fileira "Três formas de estruturar"
   (as 4 alternativas), agora que ela tem 4 colunas.
   Problemas corrigidos:
   (a) o 4º card (Presença) herdava o padding padrão do e-con
       (10px), então o header rosa ficava "afastado" e não
       contornava o arredondamento como os 3 primeiros;
   (b) os headers coloridos tinham alturas diferentes
       (134/160/160/134px) → os subtítulos começavam em linhas
       diferentes, deixando a fileira desalinhada;
   (c) a fileira encostava no fim da seção (sem respiro embaixo).
   --------------------------------------------------------- */

/* (a) 4º card encosta o header nas bordas e contorna o raio,
   igual aos 3 primeiros */
.elementor-8 .elementor-element.elementor-element-aacefa5 > .su-alt-card {
  padding: 0;
}

/* (b) mesma altura de header nos 4, com o título centralizado
   verticalmente → os subtítulos/corpos alinham na mesma linha */
.elementor-8 .elementor-element.elementor-element-873ed84,
.elementor-8 .elementor-element.elementor-element-039ad18,
.elementor-8 .elementor-element.elementor-element-f39fcf4,
.su-alt-card .su-alt-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 160px;
  padding: 22px 25px !important;
  box-sizing: border-box;
}
.elementor-8 .elementor-element.elementor-element-873ed84 .elementor-heading-title,
.elementor-8 .elementor-element.elementor-element-039ad18 .elementor-heading-title,
.elementor-8 .elementor-element.elementor-element-f39fcf4 .elementor-heading-title {
  margin: 0;
}

/* no mobile (1 coluna) não precisa forçar altura — evita banda
   colorida grande demais sobre título de 1 linha */
@media (max-width: 767px) {
  .elementor-8 .elementor-element.elementor-element-873ed84,
  .elementor-8 .elementor-element.elementor-element-039ad18,
  .elementor-8 .elementor-element.elementor-element-f39fcf4,
  .su-alt-card .su-alt-head {
    min-height: 0;
  }
}

/* (c) respiro no topo (título colava na borda da seção) e no fim
   (a fileira encostava no final) */
.elementor-8 .elementor-element.elementor-element-f321b48 > .e-con-inner {
  padding-top: 72px;
  padding-bottom: 80px;
}
@media (max-width: 767px) {
  .elementor-8 .elementor-element.elementor-element-f321b48 > .e-con-inner {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}