/* tour.css: o estúdio por dentro, numa seção preta, na variação que o dono escolheu em 17/10/2026: a foto da mesa do
   podcast com alfinetes mostarda numerados no que se usa na gravação, e a legenda numerada ao lado (embaixo, no
   telefone). O play no canto da foto troca a foto pelo vídeo do tour, no mesmo quadro (o estudio.js põe
   .tour__quadro--tocando). A foto fica em 16:9 nos dois aparelhos, porque os alfinetes moram em porcentagem dela.
   Depende de: base.css e secoes-do-estudio.css. Telefone nas regras soltas, computador no @media do fim. */

.tour__dentro { display: grid; gap: 24px; }

.tour__quadro { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; }

.tour__foto { width: 100%; height: 100%; object-fit: cover; }

/* cada alfinete diz onde mora pelo --x e o --y, em porcentagem da foto */
.tour__alfinete {
  position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--mostarda); color: var(--preto); font-size: 13px; font-weight: 800;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 5px rgba(245, 179, 1, .35), 0 4px 14px rgba(0, 0, 0, .45);
}

/* no telefone o botão mora no canto de cima à direita, onde não há alfinete (embaixo ele cobria o 4) */
.tour__tocar {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border: 0; border-radius: 999px; background: rgba(17, 17, 17, .82); color: var(--branco);
  font-size: 13px; font-weight: 700;
}
.tour__tocar:hover { background: var(--preto); }
.tour__tocar-icone { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mostarda); color: var(--preto); }
.tour__tocar-icone svg { width: 14px; height: 14px; margin-left: 2px; }

.tour__video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }

/* tocando, a foto, os alfinetes e o botão saem de baixo do vídeo */
.tour__quadro--tocando .tour__alfinete,
.tour__quadro--tocando .tour__tocar { display: none; }

/* ------------------------------------------------------------ o texto e a legenda */

.tour__texto { display: grid; gap: 20px; align-content: center; }
.tour__texto .secao-estudio__cabeca { margin-bottom: 0; }

.tour__legenda { display: grid; gap: 14px; }
.tour__legenda li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-content: start; }
.tour__numero {
  grid-row: 1 / 3; align-self: start; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--mostarda); color: var(--preto); font-size: 12px; font-weight: 800;
}
.tour__legenda strong { font-size: 15px; font-weight: 800; }
.tour__legenda li > span:last-child { font-size: 14px; color: var(--texto-no-preto); }

.tour__nota { font-size: 12px; color: var(--texto-no-preto); }

@media (min-width: 900px) {
  .tour__dentro { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: center; }
  .tour__quadro { border-radius: 18px; }
  .tour__alfinete { width: 36px; height: 36px; font-size: 15px; box-shadow: 0 0 0 6px rgba(245, 179, 1, .35), 0 6px 18px rgba(0, 0, 0, .45); }
  .tour__tocar { top: auto; right: auto; left: 18px; bottom: 18px; font-size: 14px; }
  .tour__legenda { gap: 18px; }
  .tour__legenda strong { font-size: 16px; }
}