/* Plano B do QPlay — o MESMO visual da landing do evento (/agora, regras .agora-* do site.css do QPlay),
   copiado aqui porque esta página não pode carregar nada do QPlay. Quem chega não deve perceber que
   está num endereço alternativo. Ao mudar a landing, mude isto junto. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff;
  background: #0f0710;
}

.agora-page {
  min-height: 100vh;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(233, 30, 140, .35), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(175, 70, 148, .28), transparent 55%),
    #0f0710;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left));
}
.agora-wrap { width: 100%; max-width: 78rem; }
.agora-card {
  display: grid;
  gap: 2rem;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1.25rem;
  background: rgba(20, 10, 20, .55);
  backdrop-filter: blur(10px);
  padding: 2.5rem;
}
@media (min-width: 900px) { .agora-card { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 3rem; } }
@media (max-width: 600px) { .agora-card { padding: 1.5rem; } }
.agora-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; border-radius: 999px;
  background: #af4694;
  margin-bottom: 1.5rem;
}
.agora-icone svg { width: 1.75rem; height: 1.75rem; color: #fff; }
.agora-titulo { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.15; margin: 0; text-wrap: balance; }
.agora-sub { margin: .9rem 0 0; color: rgba(255, 255, 255, .72); line-height: 1.5; }
.agora-sub-restrita { font-size: .9rem; opacity: .85; }
.agora-label { display: block; margin: 2rem 0 .5rem; font-weight: 600; font-size: .95rem; }
.agora-input {
  width: 100%; background: rgba(255, 255, 255, .04); color: #fff;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: .6rem;
  padding: .85rem 1rem; font-size: 1rem; font-family: inherit;
}
.agora-input::placeholder { color: rgba(255, 255, 255, .35); }
.agora-input:focus { outline: none; border-color: #af4694; }
.qplay-button {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  border: 0; border-radius: 999px; color: #fff; font: inherit; font-weight: 700;
  background: linear-gradient(135deg, #e91e8c, #af4694 55%, #7b2d6b);
  box-shadow: 0 10px 30px rgba(233, 30, 140, .28);
  padding: .75rem 1.4rem;
}
.qplay-button[disabled] { opacity: .65; cursor: progress; }
.agora-botao { width: 100%; margin-top: 1rem; justify-content: center; padding-block: .9rem; font-size: 1rem; }
.agora-erro { margin: 1rem 0 0; color: #ff9b9b; font-size: .9rem; }
.agora-ok { margin: 1rem 0 0; color: #7bd88f; font-size: .9rem; }
.legal-aviso { margin: .9rem 0 0; font-size: .8rem; color: rgba(255, 255, 255, .55); line-height: 1.45; }
.legal-aviso a { color: #e07bbf; }

.agora-outro { margin: 1.75rem 0 0; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 1.25rem; }
.agora-outro > summary {
  cursor: pointer; list-style: none; font-weight: 600; font-size: .95rem;
  color: #af4694; display: inline-flex; align-items: center; gap: .45rem;
}
.agora-outro > summary::-webkit-details-marker { display: none; }
.agora-outro > summary::before { content: "+"; font-size: 1.15rem; line-height: 1; }
.agora-outro[open] > summary::before { content: "−"; }
.agora-outro-ajuda { margin: .75rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .6); line-height: 1.5; }
.agora-outro .agora-label { margin-top: 1.1rem; }

.agora-validade {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: 1.75rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .6); line-height: 1.5;
}
.agora-validade svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: #af4694; }
.agora-validade strong { color: #af4694; font-weight: 600; }

.agora-player { border-radius: .75rem; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.agora-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.agora-player-bloqueado { position: relative; display: grid; place-items: center; background: #120a12 center / cover no-repeat; }
.agora-player-bloqueado::before { content: ""; position: absolute; inset: 0; background: rgba(8, 4, 8, .62); backdrop-filter: blur(3px); }
.agora-cadeado { position: relative; display: grid; justify-items: center; gap: .6rem; padding: 1rem; text-align: center; color: #fff; font-weight: 600; }
.agora-cadeado svg { width: 2.4rem; height: 2.4rem; }

.agora-saida { text-align: center; margin: 1.5rem 0 0; font-size: .88rem; }
.agora-saida a { color: rgba(255, 255, 255, .6); text-decoration: underline; }

/* O hub: só "abrindo a transmissão" enquanto decide o caminho. */
.hub { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.girando { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: #e07bbf; animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 3s; } }

input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #e07bbf; outline-offset: 3px; }
[hidden] { display: none !important; }