/* Faixa de respostas, sob o topo.

   Card claro sobre o chao mais escuro da pagina, canto reto e fio fino:
   a mesma linguagem do card de produto. O Mercado Livre usa sombra e
   canto redondo para o mesmo efeito — aqui o degrau de tom ja basta, e
   evita o arranjo mais repetido em site gerado. */

.beneficios {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  background: var(--linha);
  border-block: 1px solid var(--linha);
}
.beneficios[hidden] { display: none; }

.beneficio {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 20px 22px;
  background: var(--papel);
}

.beneficio svg {
  width: 26px; height: 26px; flex: none;
  margin-top: 1px;
  fill: none; stroke: var(--laranja);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.beneficio > div { display: grid; gap: 3px; min-width: 0; }

.beneficio strong {
  font-variation-settings: "wdth" 112; font-weight: 800;
  font-size: .88rem; letter-spacing: .01em;
  color: var(--texto);
}
.beneficio span {
  font-size: .82rem; line-height: 1.4;
  color: var(--texto-medio);
}
.beneficio a {
  margin-top: 2px;
  font-size: .78rem; font-weight: 700;
  color: var(--laranja-forte);
  text-decoration: underline; text-underline-offset: 3px;
}
.beneficio a:hover { color: var(--texto); }

@media (max-width: 560px) {
  .beneficio { padding: 15px 16px; gap: 11px; }
  .beneficio svg { width: 22px; height: 22px; }
}