/* depoimentos.css: o que dizem de quem gravou, na variação que o dono escolheu em 17/10/2026, o palco: um depoimento
   grande por vez, em cor, com a frase por cima do pé escuro e o play mostarda no meio (abre a janela do depoimento);
   ao lado (embaixo, no telefone), a fila de quem tem depoimento, com o da tela marcado, e a nota do Google num bloco
   preto. Tocar em alguém da fila troca o palco (o estudio.js).
   Depende de: base.css e secoes-do-estudio.css. Telefone nas regras soltas, computador no @media do fim. */

.palco { display: grid; gap: 14px; }

/* as estrelas mostarda, também usadas no mosaico do "por que gravar aqui" */
.estrelas { color: var(--mostarda-escuro); font-size: 16px; letter-spacing: 2px; line-height: 1; }

/* ------------------------------------------------------------ a tela grande */

.palco__tela { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 16px; background: #000; color: var(--branco); isolation: isolate; }
.palco__foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.palco__tela::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .88));
}

.palco__play {
  position: absolute; top: 40%; left: 50%; display: grid; place-items: center; width: 68px; height: 68px;
  border: 0; border-radius: 50%; background: var(--mostarda); color: var(--preto); transform: translate(-50%, -50%);
  transition: transform .2s ease;
}
.palco__play:hover { transform: translate(-50%, -50%) scale(1.07); }
.palco__play svg { width: 26px; height: 26px; margin-left: 3px; }

.palco__frase { position: absolute; left: 18px; right: 18px; bottom: 18px; margin: 0; }
.palco__frase p { font-size: 18px; font-weight: 700; line-height: 1.35; }
.palco__frase cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; font-weight: 600; color: rgba(255, 255, 255, .78); }

/* ------------------------------------------------------------ a fila e a nota */

.palco__lado { display: grid; gap: 10px; align-content: start; }

.palco__fila { display: grid; gap: 8px; }

.palco__pessoa {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 1px solid var(--linha);
  border-radius: 14px; background: var(--branco); text-align: left;
}
.palco__pessoa { transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
.palco__pessoa:hover { background: var(--bloco); }
/* o cartão afunda um pouco no toque, antes do palco trocar */
.palco__pessoa:active { transform: scale(.98); }
.palco__pessoa[aria-pressed="true"] { border-color: var(--preto); box-shadow: inset 0 0 0 1px var(--preto); background: var(--bloco); }
.palco__pessoa img { width: 56px; height: 56px; flex: none; border-radius: 10px; object-fit: cover; object-position: var(--foco, 50%) 30%; }
.palco__pessoa strong { display: block; font-size: 15px; font-weight: 800; }
.palco__pessoa span span { font-size: 13px; color: var(--texto-suave); }

.palco__nota { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--preto); color: var(--branco); font-size: 13px; line-height: 1.5; }
.palco__nota-valor { font-size: 28px; font-weight: 800; color: var(--mostarda); }
.palco__nota .estrelas { color: var(--mostarda); }

/* a janela de um depoimento: a foto, o que a pessoa disse e a nota de que o vídeo entra aqui */
.depo-janela { display: grid; gap: 14px; }
.depo-janela img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raio-pequeno); }
.depo-janela blockquote { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; }
.depo-janela p { font-size: 13px; color: var(--texto-suave); }

@media (prefers-reduced-motion: reduce) {
  .palco__play,
  .palco__pessoa { transition: none; }
}

@media (min-width: 900px) {
  .palco { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; align-items: start; }
  .palco__tela { aspect-ratio: 16 / 9; border-radius: 18px; }
  .palco__play { top: 46%; width: 80px; height: 80px; }
  .palco__play svg { width: 30px; height: 30px; }
  .palco__frase { left: 30px; right: 30px; bottom: 26px; }
  .palco__frase p { font-size: 23px; }
  .palco__frase cite { font-size: 14px; }
  .palco__fila { gap: 10px; }
  .palco__pessoa { gap: 14px; padding: 12px; }
  .palco__pessoa img { width: 64px; height: 64px; border-radius: 12px; }
  .palco__nota { margin-top: 4px; padding: 16px; font-size: 14px; }
  .palco__nota-valor { font-size: 30px; }
}