/* == Composições (C11) == */
/* Trilho sangra até a borda; o padding alinha a primeira foto com a margem do conteúdo. */
.composicoes__trilho { display: flex; gap: var(--e3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem); padding: var(--e2) var(--margem); scrollbar-width: none; }

.composicoes .composicao { flex: 0 0 86%; scroll-snap-align: start; position: relative; margin: 0; }
.composicoes .composicao__foto { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio-cartao); background: var(--foto-fundo); }

/* Marcador: alvo de 44 px. Círculo de 26 px e ponto de 8 px no ::before; anel que pulsa no ::after. */
.composicoes .marcador { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.composicoes .marcador::before { content: ''; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, var(--tinta) 4px, transparent 4.5px), var(--branco); box-shadow: var(--sombra-flutuante); }
.composicoes .marcador::after { content: ''; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border: 2px solid var(--branco); border-radius: 50%; pointer-events: none; animation: composicoes-anel 2.4s infinite; }
.composicoes .marcador--aberto::before { background: radial-gradient(circle, var(--branco) 4px, transparent 4.5px), var(--tinta); }
.composicoes .marcador--aberto::after { display: none; }
@keyframes composicoes-anel { from { transform: scale(1); opacity: .6; } to { transform: scale(1.8); opacity: 0; } }

/* Mini-cartão: encaixado na foto, do lado oposto ao marcador (ladoMiniCartao). */
.composicoes .mini-cartao { position: absolute; inset-inline: var(--e2); z-index: 2; padding: var(--e3); background: var(--branco); border-radius: 16px; box-shadow: var(--sombra-flutuante); }
.composicoes .mini-cartao--base { bottom: var(--e2); }
.composicoes .mini-cartao--topo { top: var(--e2); }
.composicoes .mini-cartao__linha { display: flex; align-items: center; gap: var(--e3); }
.composicoes .mini-cartao__linha > div { min-width: 0; }
.composicoes .mini-cartao__linha img { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: 10px; background: var(--foto-fundo); }
.composicoes .mini-cartao__nome { font: 600 14px/1.3 var(--sans); padding-right: 44px; overflow-wrap: anywhere; }
.composicoes .mini-cartao .t-preco { font-size: 13px; }
.composicoes .mini-cartao__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: var(--e2); font-weight: 600; }
.composicoes .mini-cartao__link .icon { width: 18px; height: 18px; }
.composicoes .mini-cartao__fechar { position: absolute; top: 0; right: 0; }

/* Barra de progresso: 120 px; a parte visível da rolagem é o indicador. */
.composicoes .progresso { width: 120px; height: 3px; border-radius: var(--raio-pilula); background: var(--filete); margin: var(--e4) var(--margem) 0; overflow: hidden; }
.composicoes .progresso__barra { height: 100%; border-radius: inherit; background: var(--tinta); }

/* Setas só a partir de 1000 px. */
.composicoes__setas { display: none; }

@media (min-width: 720px) {
  .composicoes .composicao { flex-basis: 46%; }
}

@media (min-width: 1000px) {
  .composicoes__trilho { padding-inline: max(var(--margem), calc((100% - var(--largura)) / 2)); scroll-padding-inline: max(var(--margem), calc((100% - var(--largura)) / 2)); }
  .composicoes .composicao { flex-basis: 32%; }
  .composicoes .mini-cartao { max-width: 280px; }
  /* Barra e setas na mesma linha: recuo | barra | espaço | setas | recuo. */
  .composicoes { display: grid; grid-template-columns: max(var(--margem), calc((100% - var(--largura)) / 2)) 120px minmax(0, 1fr) auto max(var(--margem), calc((100% - var(--largura)) / 2)); align-items: center; }
  .composicoes > .conteudo { grid-row: 1; grid-column: 1 / -1; }
  .composicoes__trilho { grid-row: 2; grid-column: 1 / -1; }
  .composicoes .progresso { grid-row: 3; grid-column: 2; margin: var(--e5) 0 0; }
  .composicoes__setas { grid-row: 3; grid-column: 4; display: flex; gap: var(--e2); margin-top: var(--e5); }
  .composicoes__setas .botao-seta { width: 44px; height: 44px; }
}