/* ==========================================================================
   SAMI Sistemas — Página "Sobre"
   Reaproveita os componentes de solucao.css (hero-solucao, diferenciais,
   ponte-solucao, pilar__checagem, cta-form) — só os ajustes específicos
   desta página ficam aqui.
   ========================================================================== */

/* Hero sem mockup (essa página não tem uma imagem de painel pra mostrar):
   o .hero-solucao base usa margin-bottom:22rem + o mockup com margin-bottom
   negativo pra "vazar" no fundo claro debaixo dele — sem mockup nenhum,
   isso deixaria um vão enorme e vazio antes da próxima seção. Mesma
   receita do fade de .hero-solucao--locacao (que também não vaza): a
   imagem de fundo (bg-overlay.jpg) precisa desbotar pra --cor-fundo-escuro
   antes de acabar, senão a emenda com a próxima seção corta seco. */
.hero-solucao--sobre {
  background-image:
    linear-gradient(to bottom, transparent 0%, transparent 70%, var(--cor-fundo-escuro) 100%),
    url("assets/img/bg-overlay.jpg");
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  margin-bottom: 0;
  padding-bottom: var(--espaco-96);
}

/* --------------------------------------------------------------------------
   Nosso Compromisso (Missão/Visão)
   -------------------------------------------------------------------------- */

/* .diferenciais__grade base é pensado pra 3 itens curtos — aqui são só 2
   (Missão/Visão), com texto bem mais longo que o normal do componente. */
.sobre-compromisso__grade {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 50rem;
  margin-inline: auto;
}

.sobre-compromisso__item {
  align-items: flex-start;
  text-align: left;
}

/* icon-escudo.svg/icon-globo.svg nascem com fill escuro (pensados pra
   ficar sobre fundo claro, ex.: .pilar__icone em condominios.php) — aqui
   dentro do círculo azul (.diferenciais__icone) ficavam invisíveis.
   Força branco via filtro, sem precisar de uma cópia colorida do ícone. */
.sobre-compromisso__item .diferenciais__icone img {
  filter: brightness(0) invert(1);
}

.sobre-compromisso__texto {
  font-size: var(--texto-medio);
  line-height: var(--altura-linha-texto);
}

/* --------------------------------------------------------------------------
   Nossos valores
   -------------------------------------------------------------------------- */

.sobre-valores__titulo {
  margin-top: var(--espaco-64);
  text-align: center;
  font-size: var(--texto-grande);
  font-weight: var(--peso-semibold);
  color: var(--cor-texto);
}

.sobre-valores__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espaco-24) var(--espaco-32);
  max-width: 68rem;
  margin: var(--espaco-24) auto 0;
}

.sobre-valores__item {
  align-items: flex-start;
}

.sobre-valores__item img {
  margin-top: 0.2rem;
}

.sobre-valores__conteudo {
  display: block;
  color: var(--cor-texto-suave);
}

.sobre-valores__conteudo strong {
  display: block;
  color: var(--cor-texto);
  margin-bottom: var(--espaco-4, 0.25rem);
}

/* --------------------------------------------------------------------------
   Nossos parceiros
   -------------------------------------------------------------------------- */

.sobre-parceiros {
  position: relative;
  padding-block: var(--espaco-96);
  text-align: center;
}

.sobre-parceiros__titulo {
  font-size: var(--texto-titulo-secao);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--espacamento-letra-titulo);
  color: var(--cor-texto);
}

.sobre-parceiros__descricao {
  max-width: 34rem;
  margin: var(--espaco-16) auto 0;
  color: var(--cor-texto-suave);
}

.sobre-parceiros__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-32) var(--espaco-40);
  margin-top: var(--espaco-48);
}

.sobre-parceiros__logo {
  opacity: 0.75;
  transition: opacity var(--transicao-rapida);
}

.sobre-parceiros__logo:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {

  /* 1024px */
  .sobre-compromisso__grade {
    max-width: 100%;
  }
}

@media (max-width: 48rem) {

  /* 768px */
  .sobre-compromisso__grade,
  .sobre-valores__grade {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}