/*
 * COMBO, PÁGINA DE VENDA (2026-10-11). Escopo: body.loja-produto-combo (loja/combo.html).
 *
 * Vem DEPOIS de css/spi-venda.css, que traz o topo escuro e dourado, a moldura de celular, a faixa de
 * números, as linhas de diferencial, a grade, os passos e o resto do modelo. Aqui só entra o que é do
 * combo: o título de grupo ("No plantão e no consultório"), o link para a página de cada caixa, a
 * conta (R$ 804,90 contra R$ 579) e os ajustes das listas. Cor nova nenhuma: tudo vem dos tokens
 * --sv-* do spi-venda.css.
 */

/* o aviso de que cada linha é de uma caixa: a etiqueta da caixa e o preço avulso lado a lado */
.cb-grupo { margin-top: clamp(2rem, 6vw, 3.4rem); padding-top: clamp(1.4rem, 4vw, 2.2rem); border-top: 1px solid var(--sv-linha); }
.cb-grupo:first-of-type { margin-top: 1.6rem; }
.spi-venda .cb-grupo h3 { margin: .35rem 0 .6rem; color: #fff; font-size: clamp(1.3rem, 4.6vw, 1.8rem); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.cb-grupo .spi-intro { margin-bottom: 0; }
.cb-grupo + .spi-dif { border-top: 0; padding-top: 1.4rem; }

/* link para a página da caixa avulsa: discreto, sem competir com o botão de compra */
.cb-ver { margin: 1.1rem 0 0; }
.spi-venda .cb-ver a {
  display: inline-block; padding: .5rem 1rem; border: 1px solid rgba(241, 207, 107, .45); border-radius: 999px;
  color: var(--sv-claro); font-size: .86rem; font-weight: 600; text-decoration: none;
}
.spi-venda .cb-ver a:hover { background: rgba(241, 207, 107, .12); border-color: var(--sv-borda); }

/* os três motivos do topo, em grade quando há espaço */
.cb-proposta { margin-top: 1.4rem; }
@media (min-width: 900px) { .cb-proposta { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }

/* o resto de cada caixa: sem foto ao lado, a faixa de título ocupa a largura toda */
#resto .spi-base-cab { grid-template-columns: minmax(0, 1fr); }
/* a etiqueta da caixa vai sempre numa linha própria, abaixo do título, para as 12 cartas ficarem iguais */
#resto .spi-grade h3 small { display: block; width: fit-content; margin: .45rem 0 0; }

/* a conta */
.cb-conta { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin-top: 1.6rem; }
.cb-conta > div { padding: 1.3rem 1.3rem 1.4rem; background: var(--sv-painel); border: 1px solid var(--sv-fio); border-radius: 1.1rem; }
.cb-conta strong { display: block; color: var(--sv-claro); font-size: clamp(1.7rem, 6.4vw, 2.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.spi-venda .cb-conta h3 { margin: .5rem 0 .4rem; color: #fff; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.cb-conta p { margin: 0; color: var(--sv-mudo); font-size: .95rem; line-height: 1.55; }
.cb-conta-destaque { border: 2px solid var(--sv-borda) !important; background: radial-gradient(80% 60% at 50% 0%, rgba(241, 207, 107, .13), transparent 70%), var(--sv-painel) !important; box-shadow: 0 0 0 1px rgba(241, 207, 107, .2), 0 20px 50px rgba(0, 0, 0, .45); }
.cb-conta-destaque strong { color: #fff; }

.cb-passos-3 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 760px) {
  .cb-conta { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .cb-passos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) { .spi-venda .loja-oferta-grade, .spi-venda .loja-ofertas { align-items: stretch; } }