/* ==========================================================================
   03-produtos.css — 3 cards (Pix / Boleto / Links e QR Codes)
   Grade: 1 col <390 · 2 col ≥390 · 3 col ≥1440 (D5)
   Trilho fixo 88 (.container--fixed) + continuidade para #quanto-custa (.container--join-b, D18)
   ========================================================================== */

/* Célula: só padding horizontal (o padding vertical é de cada card, para a
   tracejada atravessar toda a altura da célula). 24 → 32 → 64 → 104. */
.prod__cell { padding: 0 var(--cell-px); }

.prod__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--sp-6);
}
@media (min-width: 390px)  { .prod__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1440px) { .prod__grid { grid-template-columns: repeat(3, 1fr); } }
/* 390–1439 fica em 2 colunas e o 3º card sozinho na linha de baixo (meia linha vazia):
   é o comportamento do site de referência (`desktopDefault:` = 1440, D5) e está confirmado
   no screenshot mobile. NÃO antecipar as 3 colunas para 1025 nem esticar o :last-child. */

/* Card (SPEC §4.10): sem borda, sem sombra, sem hover. */
.prod__item {
  position: relative;
  min-width: 0;
  padding-block: var(--sp-8);            /* 32 */
}
@media (min-width: 1440px) { .prod__item { padding-block: var(--sp-30); } }  /* 120 */

/* Cabeçalho: barra lime 4×48 (cobre a tracejada) + ícone 24px */
.prod__head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);                      /* 20 */
}
.prod__bar {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--accent-bar-w);
  height: var(--accent-bar-h);
  background: var(--c-lime);
}
.prod__icon {
  flex: 0 0 auto;
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--c-ink-900);
}

/* Corpo */
.prod__body {
  display: grid;
  gap: var(--sp-3);                      /* 12 */
  margin-top: var(--sp-8);               /* 32 */
  padding-left: var(--sp-5);             /* 20 → alinhado ao ícone */
}
.prod__h3 {
  font: var(--fw-semibold) var(--fs-h3-card)/var(--lh-h3-card) var(--font-display);
  letter-spacing: var(--ls-card);
  color: var(--c-ink-800);
}
.prod__p {
  font: var(--fw-medium) var(--fs-small)/var(--lh-body) var(--font-body);
  letter-spacing: normal;                /* ref: tracking 0 aqui (--ls-body-sm é dos cards de #docs) */
  color: var(--c-ink-600);
  overflow-wrap: break-word;
}

/* <769: nas 2 colunas estreitas de 390/430 a coluna mede ~159px e "Recebimento por Pix" /
   "Links e QR Codes" quebram em 2 linhas. Com --lh-h3-card (1.02 = 20,4px), calibrado para
   UMA linha em 1440, sobra 1,6px entre o descendente de "por" e a caixa alta de "Pix" — as
   linhas praticamente encostam. 1.25 devolve leading legível. ≥769 a coluna já é larga o
   bastante para uma linha só e nada muda (1440 intocado). */
@media (max-width: 768px) {
  .prod__h3 { line-height: 1.25; }
}