/* Troca de Assinatura (C12). Todo seletor começa em .troca. */
.troca { background: var(--ass-sup); transition: background-color var(--medio) var(--curva); }
.troca .troca__corpo { display: grid; gap: var(--e5); margin-top: var(--e5); }

/* Palco: as 4 peças empilhadas no mesmo lugar; só a escolhida aparece. */
.troca .troca__palco { display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; aspect-ratio: 4 / 5; max-height: 440px; border-radius: var(--raio-cartao); background: rgb(255 253 248 / .55); }
.troca .troca__peca { grid-area: 1 / 1; height: 88%; width: auto; max-width: 90%; object-fit: contain; opacity: 0; transition: opacity var(--medio) var(--curva); }
.troca .troca__peca--ativa { opacity: 1; }

/* Interruptores: pílulas em grade; a escolhida ganha a cor da Assinatura. Pílula com menos de ~172 px
   (320 e 360 px, nomes longos) quebra o trilho para a 2ª linha em vez de vazar a borda. */
/* A grade escolhe as colunas: 1 em 320 px, 2 a partir de 360 px (Android comum), sem o trilho cair de linha. */
.troca .interruptores { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--e2); }
.troca .interruptor { display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 6px 12px 6px 6px; border: 1px solid var(--filete); border-radius: var(--raio-pilula); background: rgb(255 253 248 / .7); cursor: pointer; }
.troca .interruptor__gata { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.troca .interruptor__nome { font-size: 15px; font-weight: 600; }
.troca .interruptor__trilho { position: relative; flex: none; width: 30px; height: 18px; margin-left: auto; border-radius: var(--raio-pilula); background: var(--filete); transition: background-color var(--rapido) var(--curva); }
.troca .interruptor__bolinha { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--branco); transition: transform var(--rapido) var(--curva); }
/* Borda de 2 px sem mudar a caixa: o 2º px é sombra interna. Com borda de 2 px a caixa encolhia ao escolher
   e a quebra do trilho mudava, e a seção pulava de altura (medido em 360–384 e 720–760 px). */
.troca .interruptor:has(input:checked) { border-color: var(--ass); box-shadow: inset 0 0 0 1px var(--ass); background: var(--branco); }
.troca .interruptor:has(input:checked) .interruptor__nome { color: var(--ass); }
.troca .interruptor:has(input:checked) .interruptor__trilho { background: var(--ass); }
.troca .interruptor:has(input:checked) .interruptor__bolinha { transform: translateX(12px); }
.troca .interruptor:has(input:focus-visible) { outline: 3px solid var(--oliva); outline-offset: 3px; }

/* Informação: os 4 blocos ocupam o mesmo lugar; a altura é a do maior, então nada pula. */
.troca .troca__info { display: grid; }
.troca .troca__bloco { grid-area: 1 / 1; display: grid; gap: var(--e3); justify-items: start; visibility: hidden; }
.troca .troca__bloco--ativo { visibility: visible; }
.troca .troca__nome { color: var(--ass); }

@media (min-width: 720px) {
  .troca .interruptores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .troca .troca__corpo { grid-template-columns: 352px 1fr; align-items: center; column-gap: var(--e7); }
  .troca .troca__palco { grid-column: 1; grid-row: 1 / span 2; }
  .troca .interruptores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .troca .interruptor__gata { width: 40px; height: 40px; }
}
/* Fileira de 4 pílulas, como os interruptores do ledup, só onde cabem (a coluna da direita passa de 640 px). */
@media (min-width: 1200px) { .troca .interruptores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }