/* bloco reconhecimento: titulo nas colunas 1 a 6, selos nas 8 a 12 */
.reconhecimento { background: #fff; padding-block: clamp(72px, 8vw, 120px); }
.reconhecimento .grade { align-items: center; }

.reconhecimento__copy { grid-column: 1 / span 6; }
.reconhecimento__titulo { margin-top: clamp(16px, 1.8vw, 24px); font-size: calc(clamp(34px, 3.4vw, 58px) * var(--escala-texto, 1)); line-height: 1.06; }

.selo {
  grid-column: span 3;
  min-height: 280px;
  padding-left: clamp(20px, 2.4vw, 40px);
  box-shadow: inset 1px 0 0 var(--line);
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 18px;
  transition: transform .6s var(--mola);
}
.selo:hover { transform: translateY(-6px); }
.selo img { max-height: 150px; max-width: 170px; width: auto; transition: transform .7s var(--mola); }
.selo:hover img { transform: scale(1.06); }
.selo figcaption { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: calc(13px * var(--escala-texto, 1)); font-weight: 600; }
.selo figcaption span { color: var(--muted); font-size: var(--t-mini); font-weight: 400; }

@media (max-width: 1080px) {
  .reconhecimento__copy { grid-column: 1 / -1; margin-bottom: 20px; }
  .selo { grid-column: span 6; min-height: 240px; }
}

@media (max-width: 680px) {
  .selo { grid-column: 1 / -1; box-shadow: inset 0 1px 0 var(--line); padding-left: 0; padding-top: 32px; }
}