/* Faixa econômica entre contexto e segurança na vertical médica. */
.economics-section {
  padding: 122px 0 136px;
}

/* Shell central com a mesma largura base das seções amplas. */
.economics-shell {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* Cabeçalho centralizado com título e parágrafo do frame desktop. */
.economics-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

/* Título em gradiente com destaques em bold. */
.economics-title {
  width: 690px;
  margin: 0;
  background: linear-gradient(170.91deg, #57d4ff 0%, #845cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.356;
  letter-spacing: 0.76px;
}

.economics-title strong {
  font-family: "Muring Display", system-ui, sans-serif;
  font-weight: 700;
}

/* Texto de apoio em cinza padrão do projeto. */
.economics-description {
  width: 772px;
  margin: 0;
  color: #64748b;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.47;
  text-align: center;
}

/* Cluster de pills do desktop em duas linhas. */
.economics-pills--desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* Linhas independentes para reproduzir a composição horizontal do Figma. */
.economics-row {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

/* Pill cinza claro com ícone roxo e texto em cinza. */
.economics-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 73px;
  padding: 20px;
  border-radius: 95px;
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.47;
  white-space: nowrap;
}

/* Larguras fixas seguindo o frame desktop. */
.economics-row:first-child .economics-pill:first-child {
  width: 515px;
}

.economics-row:first-child .economics-pill:last-child {
  width: 499px;
}

.economics-row:last-child .economics-pill:nth-child(1) {
  width: 430px;
}

.economics-row:last-child .economics-pill:nth-child(2) {
  width: 492px;
}

.economics-pill--short {
  width: 321px;
}

/* Ícone de check roxo replicado em todas as cápsulas. */
.economics-pill img {
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  display: block;
}

/* A lista mobile fica escondida fora do breakpoint menor. */
.economics-mobile-list {
  display: none;
}

/* O CTA só aparece no mobile, conforme o node 951:6875. */
.economics-cta {
  display: none;
}

/* Tablet: mantém tudo central, mas já permite wrap nos pills. */
@media (max-width: 1180px) {
  .economics-section {
    padding: 96px 0 108px;
  }

  .economics-shell {
    width: min(720px, calc(100% - 48px));
  }

  .economics-title {
    width: min(100%, 620px);
    font-size: 34px;
    letter-spacing: 0.68px;
  }

  .economics-description {
    width: min(100%, 620px);
    font-size: 18px;
  }

  .economics-pills--desktop {
    width: 100%;
    gap: 14px;
  }

  .economics-row {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }

  .economics-row:first-child .economics-pill:first-child,
  .economics-row:first-child .economics-pill:last-child,
  .economics-row:last-child .economics-pill:nth-child(1),
  .economics-row:last-child .economics-pill:nth-child(2),
  .economics-pill--short {
    width: auto;
  }

  .economics-pill {
    min-height: 64px;
    font-size: 18px;
    white-space: normal;
    text-align: left;
  }
}

/* Mobile segue o node 951:6875 com cartões verticais e CTA no fim. */
@media (max-width: 480px) {
  .economics-section {
    padding: 86px 0 104px;
  }

  .economics-shell {
    width: min(335px, calc(100% - 40px));
    gap: 25px;
  }

  .economics-header {
    width: 335px;
    gap: 25px;
  }

  .economics-title {
    width: 325px;
    font-size: 28px;
    letter-spacing: 0.56px;
  }

  .economics-description {
    width: 335px;
    font-size: 16px;
    font-weight: 500;
  }

  .economics-pills--desktop {
    display: none;
  }

  .economics-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 19px;
    width: 335px;
  }

  .economics-mobile-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 88px;
    padding: 20px;
    border-radius: 30px;
    background: rgba(100, 116, 139, 0.1);
  }

  .economics-mobile-card img {
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    display: block;
  }

  .economics-mobile-card p {
    margin: 0;
    color: #64748b;
    font-family: "Muring Text", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.47;
  }

  .economics-mobile-card--short {
    min-height: 73px;
  }

  .economics-cta {
    display: inline-flex;
    width: 272.308px;
  }

  .economics-cta__label {
    width: 181.659px;
    font-size: 13.46px;
    letter-spacing: 0.2692px;
  }

  .economics-cta__icon,
  .economics-cta__icon img {
    width: 41.433px;
    height: 41.433px;
    flex-basis: 41.433px;
  }
}