/* Seções da versão rosa bebê: destaques, mais vendidos e combos */
.secao-topo { margin-bottom: 14px; }
.secao-topo p { color: var(--tinta-suave); font-size: 15px; }
.stories .trilho, .cat-botoes { align-items: flex-start; }
.stories .trilho { gap: 4px; }
.story { display: block; width: 88px; text-align: center; white-space: nowrap; }
.story span { width: 72px; margin-inline: auto; }
@media (min-width: 900px) {
  .stories .trilho { gap: 12px; }
  .story { width: 104px; }
  .story span { width: 88px; }
}

/* Destaques: uma peça grande e quatro menores */
.destaques { padding-block: 32px 4px; }
.destaques .card:first-child { grid-column: 1 / -1; }
.destaques .card:first-child .card-foto { aspect-ratio: 4 / 4.4; }
@media (min-width: 900px) {
  .destaques .card:first-child { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
  .destaques .card:first-child .card-foto { flex: 1; min-height: 0; aspect-ratio: auto; }
}

/* Mais vendidos: ranking numerado */
.mais-vendidos { margin-top: 36px; padding-block: 28px; background: var(--rosa); counter-reset: ranking; }
.ranking .card { counter-increment: ranking; }
.ranking .card::before {
  content: counter(ranking); position: absolute; z-index: 2; top: 13px; left: 13px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%; background: var(--magenta-forte); color: #fff; font-size: 20px; font-weight: 800;
}
.ranking .selo { display: none; }

/* Combos */
.combos { padding-block: 36px 8px; }
.combos-grade { display: grid; gap: 12px; }
.combo { padding: 6px 6px 14px; background: #fff; border-radius: 24px; }
.combo-fotos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 100%; overflow: hidden; border-radius: 19px; }
.combo-fotos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.combo-mais { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 38px; height: 38px; display: grid; place-items: center; padding-bottom: 3px; border-radius: 50%; background: #fff; color: var(--magenta-forte); font-size: 26px; line-height: 1; }
.combo-info { padding: 10px 8px 0; }
.combo-info h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; }
.combo-texto { font-size: 15px; color: var(--tinta-suave); }
.combo-info .btn { width: 100%; margin-top: 10px; }
@media (min-width: 640px) { .combos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .combos-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

/* Compre por categoria: carrossel de ícones; as peças aparecem depois de escolher */
.cat-tit { margin-bottom: 14px; }
.cat-carrossel { position: relative; }
.cat-seta { position: absolute; z-index: 2; top: 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .85); color: var(--magenta-forte); box-shadow: 0 1px 5px rgb(var(--sombra, 61 4 57) / .14); transition: opacity .2s; }
.cat-seta::before { content: ""; position: absolute; inset: -8px; }
.cat-seta.esq { left: 4px; }
.cat-seta.esq::before { left: -4px; right: -12px; }
.cat-seta.dir { right: 4px; }
.cat-seta.dir::before { right: -4px; left: -12px; }
.cat-seta.some { opacity: 0; pointer-events: none; }
.cat-seta .ico { width: 15px; height: 15px; stroke-width: 2; }
.cat-botao { width: 96px; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; }
.cat-icone { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%; background: var(--rosa); color: var(--magenta-forte); transition: background .2s, color .2s; }
.cat-icone svg { width: 58%; height: 68%; fill: none; stroke: currentColor; stroke-width: 1.6px; stroke-linecap: round; stroke-linejoin: round; }
.cat-icone svg path { vector-effect: non-scaling-stroke; }
.cat-icone .ico { width: 34px; height: 34px; }
@media (hover: hover) { .cat-botao:hover .cat-icone { background: var(--rosa-claro); box-shadow: inset 0 0 0 1.5px var(--magenta-forte); } }
.cat-botao.ativo { color: var(--magenta-forte); }
.cat-botao.ativo .cat-icone { background: var(--magenta-forte); color: #fff; box-shadow: none; }
.cat-resultado { margin-top: 26px; }
.cat-resultado header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cat-resultado h3 { margin: 0; }
.cat-resultado header button { flex: none; min-height: 44px; padding: 0 16px; border-radius: 22px; font-size: 15px; font-weight: 600; color: var(--magenta-forte); box-shadow: inset 0 0 0 1px var(--magenta-forte); }
@media (min-width: 900px) {
  .cat-botao { width: 124px; font-size: 16px; }
  .cat-icone { width: 108px; height: 108px; }
  .cat-seta { top: 40px; }
}
@media (min-width: 1300px) { .cat-botoes { justify-content: center; } }
