.social-footer{
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0 56px;
  color:#fff;
  overflow:hidden;
  background:
    linear-gradient(180deg, var(--ni-blue) 0%, var(--ni-blue-800) 100%),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.10) 0 16px,
      rgba(255,255,255,0) 16px 32px);
}

/* Título principal */
.social-title{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing:.3px;
  font-size: clamp(1.8rem, 4.3vw, 3rem);
  margin: 0 0 .25rem;
}

/* Item (ícone circular à esquerda + texto à direita) */
.social-item{
  display:flex;
  align-items:center;
  gap: 16px;
}

.social-ico{
  width: 70px; height: 70px;
  min-width: 70px;
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 999px;
  display:grid; place-items:center;
}
.social-ico .bi{
  font-size: 34px;
  color:#fff;
  line-height: 1;
}

/* textos */
.social-text{ line-height: 1.25; }
.social-text .line{
  font-family: var(--font-sans);
  font-weight: 500;
  opacity: .95;
  font-size: clamp(.95rem, 1.1vw, 1.1rem);
}
.social-text .strong{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
}

/* Logo inferior (use versão branca se tiver; abaixo aplicamos um “branqueamento” suave) */
.social-logo{
  width: 210px;
  filter: brightness(0) invert(1); /* troque por logo branca real quando tiver */
  opacity:.95;
}

/* Responsivo: centraliza itens em telas pequenas */
@media (max-width: 991.98px){
  .social-item{ justify-content: center; text-align:left; }
}