/* Cartões e grades das seções "para quem", "o que recebe", "bônus", "garantia", "semana", "depoimentos", "CTA final". */
.grade { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 768px) {
  .grade-2 { grid-template-columns: repeat(2, 1fr); }
  .grade-3 { grid-template-columns: repeat(3, 1fr); }
  .grade-4 { grid-template-columns: repeat(4, 1fr); }
  .grade { gap: 20px; margin-top: 40px; }
}

.cartao-cena { display: flex; gap: 14px; align-items: flex-start; }
.cartao-cena h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.cartao-cena p { font-size: 15px; color: #4a4a4f; }

.mecanismo { display: grid; gap: 22px; margin-top: 28px; }
.mecanismo-texto p + p { margin-top: 14px; }
.mecanismo-figura { border-radius: var(--raio-g); overflow: hidden; background: #fff; border: 1px solid var(--borda); }
.mecanismo-numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.numero { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px; }
.numero strong { display: block; font-family: var(--fonte-titulo); font-size: 24px; letter-spacing: -.02em; }
.numero small { color: var(--apagado); font-size: 13px; }
@media (min-width: 900px) {
  .mecanismo { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; }
  .mecanismo-numeros { grid-template-columns: repeat(4, 1fr); }
}

.recebe { display: grid; gap: 12px; margin-top: 28px; }
.recebe .cartao { display: flex; gap: 14px; align-items: flex-start; padding: 18px; }
.recebe h3 { font-size: 17px; margin-bottom: 4px; }
.recebe p { font-size: 15px; color: #4a4a4f; }
.etiqueta {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--limao-fundo); color: var(--marinho); margin-left: 6px; vertical-align: middle;
}
@media (min-width: 768px) { .recebe { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

.bonus { border: 2px solid var(--limao); background: linear-gradient(180deg, #ffffff, #f7fdea); }
.bonus .rotulo { color: var(--marinho); }
.bonus ol { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.bonus li { display: flex; gap: 14px; align-items: flex-start; }
.bonus li strong { display: block; font-size: 17px; }
.bonus li span { font-size: 15px; color: #4a4a4f; }
.bonus-numero {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--limao); color: var(--marinho);
  font-weight: 800; display: grid; place-items: center; font-family: var(--fonte-titulo);
}

.garantia { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 32px 22px; }
.garantia-selo { width: 84px; height: 84px; border-radius: 50%; background: var(--limao-fundo); display: grid; place-items: center; color: var(--marinho); }
.garantia-selo svg { width: 44px; height: 44px; }
.garantia p { max-width: 520px; color: #4a4a4f; }

.semana .cartao { padding: 22px; }
.semana .quando { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--marinho); }
.semana h3 { font-size: 19px; margin: 8px 0 8px; }
.semana p { font-size: 15px; color: #4a4a4f; }
.semana-figura { margin-top: 24px; border-radius: var(--raio-g); overflow: hidden; border: 1px solid var(--borda); background: #fff; }

.depoimento blockquote { margin: 0; font-size: 16px; }
.depoimento figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; }
.depoimento figcaption span { display: flex; flex-direction: column; }
.depoimento-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

.cta-final { background: #fff; color: var(--texto); border-top: 6px solid var(--limao); }
.cta-final .titulo { color: var(--marinho); }
.cta-final .subtitulo { color: #4a4a4f; }
.cta-final .seguranca { color: var(--apagado); }
.cta-final .seguranca a { color: var(--marinho) !important; }