/* =========================================================
   SOLUTIONS — cards de produtos/soluções
   ========================================================= */
.solutions {
  padding-block: var(--gap-section);
  background: #fff;
}

.solutions-wrap {
  position: relative;
}

/* Seis colunas numa linha só. Com 1200px de container sobram ~172px por card,
   então o gap e o padding interno foram reduzidos: cada pixel devolvido à largura
   do conteúdo evita que os títulos quebrem em três linhas. */
.solutions-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.solution-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
  background: #fff;
}

.solution-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}
/* Card com parceiro nomeado: o quadrado vira branco para o logo aparecer com as
   cores da própria marca. Sobre fundo colorido um logo verde (Ton) ou rosa (Cora)
   sumiria contra o disco. A borda sutil mantém o quadrado presente na composição,
   alinhado com os ícones coloridos dos cards vizinhos. */
/* Na home todos os blocos têm a mesma forma: ocupam a largura do card e 42px de
   altura, com o conteúdo centralizado. Sem isto os quadrados coloridos ficariam
   com 42px fixos ao lado dos blocos de logo esticados, quebrando o alinhamento
   da linha. Vale só dentro de .solution-card — os ícones das páginas internas
   (.benefit-card) continuam quadrados. */
.solution-card .solution-icon {
  width: auto;
  height: 42px;
}

.solution-icon.parceiro {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 5px 9px;
  max-width: 100%;
}
.solution-icon.parceiro img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

/* Altura por logo, não uniforme: normalização óptica e controle de nitidez.
   Os arquivos têm proporções muito diferentes (Cora é quadrada, iGreen é 3,7x
   mais larga que alta) e alturas reais distintas — o conteúdo da iGreen tem só
   15px, então esticá-la até os 32px disponíveis a deixaria borrada. Cada uma
   ocupa a fração que a mantém legível e sem ampliação agressiva. */
.solution-icon.logo-cora   img { height: 100%; }
.solution-icon.logo-ton    img { height: 90%; }
.solution-icon.logo-mengue img { height: 68%; }
.solution-icon.logo-igreen img { height: 54%; }

.solution-icon.pink   { background: var(--accent-pink); }
.solution-icon.blue   { background: var(--accent-blue); }
.solution-icon.green  { background: var(--accent-green); }
.solution-icon.orange { background: var(--accent-orange); }
.solution-icon.purple { background: var(--accent-purple); }

/* Com a coluna mais estreita, o título ganha hifenização e um corpo levemente
   menor — sem isso "Crédito para Empresa" quebraria em três linhas e
   desalinharia a altura dos cards vizinhos. */
.solution-card h3 {
  font-size: 16.5px;
  line-height: 1.25;
  margin-bottom: 4px;
  hyphens: auto;
}
.solution-card > p { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 16px; }

.solution-card ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 20px;
  flex: 1;
}
.solution-card ul li {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text);
  padding-left: 18px;
  position: relative;
}
/* O .btn global usa white-space: nowrap; numa coluna de ~172px isso faria
   "Conhecer consórcios" vazar para fora do card. Aqui o texto pode quebrar. */
.solution-card .btn {
  white-space: normal;
  padding-inline: 12px;
  font-size: 13.5px;
  line-height: 1.3;
}

.solution-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 8px;
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
}