/* ==========================================================================
   Campanhas: "Uma campanha para cada área ou momento da sua empresa"
   ========================================================================== */

.campanhas {
  max-width: 1300px;
  margin: 0 auto;
  padding: 120px 24px 0;
}
.campanhas__titulo {
  margin: 0 auto 16px;
  text-align: center;
}
.campanhas__subtitulo {
  margin: 0 auto 48px;
  text-align: center;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.4;
  font-weight: 400;
  color: var(--preto);
  text-wrap: balance;
}

.campanhas__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 12px;
}

.campanha {
  background: var(--cinza);
  border: 0;
  border-radius: 24px;
  padding: 24px 14px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.campanha[aria-pressed="true"] {
  background: var(--amarelo);
  box-shadow: 0 10px 24px rgba(65, 23, 135, .18);
}
.campanha:hover {
  transform: translateY(-3px);
}
.campanha__icone {
  width: 60px;
  height: 60px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--roxo);
  border-radius: 22px;
  box-shadow: 0 6px 14px rgba(65, 23, 135, .22);
}
.campanha__icone svg {
  width: 32px;
  height: 32px;
  display: block;
}
.campanha__textos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--roxo);
}
.campanha__nome {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
/* Fica no HTML mesmo vazio: o espaço que ocupa mantém a altura dos cards */
.campanha__detalhe {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}

@media (max-width: 768px) {
  .campanhas {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  /* Os cards viram um slider horizontal; o padding interno dá espaço à sombra e a margem negativa o compensa */
  .campanhas__grade {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(112px, calc((100vw - 48px) / 2.3), 180px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
    margin: -16px -24px -36px;
    padding: 16px 24px 36px;
  }
  .campanhas__grade::-webkit-scrollbar {
    display: none;
  }
  .campanhas__grade > * {
    scroll-snap-align: start;
  }
}