/* Mural RGS TV — layout da Ju, palco fixo 1920x1080 escalado para a tela */

@font-face { font-family: 'Fragment Glare'; src: url('../fonts/fragment-glare-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; }

:root {
  --preto: #000000;
  --texto: #1B1B1B;
  --cinza-escuro: #3D3D3D;
  --linha: #DCDCDC;
  --fundo-claro: #EFEFEF;
  --acento: #BB3D18;
  --serif: 'Fragment Glare', Georgia, serif;
  --sans: 'Lato', Arial, sans-serif;
}

html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #FFFFFF; cursor: none; -webkit-user-select: none; user-select: none; }

#palco {
  position: absolute; top: 0; left: 0;
  width: 1920px; height: 1080px;
  padding: 48px 56px; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: #FFFFFF; color: var(--texto);
  font-family: var(--sans);
  transform-origin: 0 0;
  overflow: hidden;
}

/* ---------- topo ---------- */
.topo { flex: 0 0 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--linha); }
.logo { height: 32px; width: auto; display: block; }
.topo-dir { display: flex; align-items: center; }
.hoje { font-family: var(--serif); font-size: 28px; color: var(--cinza-escuro); margin-right: 28px; }
.pontos { display: flex; align-items: center; }
.pontos span { width: 12px; height: 12px; border-radius: 999px; background: var(--linha); display: block; margin-left: 10px; transition: background-color 420ms; }
.pontos span.ativo { background: var(--acento); }

/* ---------- telas e transição ---------- */
.telas { position: relative; flex: 1 1 auto; margin-top: 36px; min-height: 0; }
.tela {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: none; opacity: 0;
  transition: opacity 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity;
}
.tela.visivel { display: flex; flex-direction: column; }
.tela.ativa { opacity: 1; }

/* ---------- peças comuns ---------- */
.cabeca { display: flex; align-items: baseline; margin-bottom: 28px; }
.cabeca .titulo { font-family: var(--serif); font-size: 68px; line-height: 1; color: var(--preto); margin-right: 24px; }
.rotulo { font-size: 17px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--acento); }

.foto { position: relative; overflow: hidden; background: #E4E4E4; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto.vazia::after {
  content: attr(data-rotulo);
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  text-align: center; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; color: #B3B3B3;
}

.legenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0));
  color: #FFFFFF;
}
.legenda .t { font-family: var(--serif); color: #FFFFFF; }
.legenda .s { color: var(--linha); }

/* ---------- 1. aniversários ---------- */
.aniv-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column-gap: 28px; }
.aniv-pessoa .foto { height: 380px; margin-bottom: 14px; }
.aniv-linha { display: flex; align-items: baseline; }
.aniv-dia { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--acento); margin-right: 12px; }
.aniv-nome { font-size: 26px; font-weight: 700; line-height: 1.15; }

.casa-cabeca { display: flex; align-items: baseline; margin: 30px 0 16px; border-top: 1px solid var(--linha); padding-top: 24px; }
.casa-cabeca .titulo { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--preto); margin-right: 20px; }
.casa-cabeca .rotulo { font-size: 15px; }
.casa-cabeca.sem-linha { border-top: 0; padding-top: 0; margin-top: 0; }
.casa-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column-gap: 28px; }
.casa-item { display: flex; align-items: center; }
.casa-item .foto { width: 108px; height: 132px; flex: 0 0 auto; margin-right: 18px; }
.casa-anos { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--acento); margin-bottom: 4px; }
.casa-nome { font-size: 22px; font-weight: 700; line-height: 1.15; }

/* ---------- 2. conquistas ---------- */
.tela.conquistas.visivel { display: grid; grid-template-columns: 1120px 1fr; grid-column-gap: 32px; }
.conq-principal { position: relative; height: 100%; }
.conq-principal .foto { height: 100%; }
.conq-principal .legenda { padding: 44px 48px; }
.conq-principal .t { font-size: 72px; line-height: 1.04; margin-top: 14px; }
.conq-lado { display: flex; flex-direction: column; height: 100%; }
.conq-lado > * { flex: 1 1 0; min-height: 0; }
.conq-lado > * + * { margin-top: 32px; }
.conq-secundaria { position: relative; }
.conq-secundaria .foto { height: 100%; }
.conq-secundaria .legenda { padding: 28px 32px; }
.conq-secundaria .rotulo { font-size: 15px; }
.conq-secundaria .t { font-size: 42px; line-height: 1.08; margin-top: 8px; }
.contador { background: var(--preto); color: #FFFFFF; padding: 36px 40px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.contador .n { font-family: var(--serif); font-size: 130px; line-height: 1; color: var(--acento); margin-bottom: 10px; }
.contador .r { font-size: 30px; font-weight: 700; margin-bottom: 10px; }
.contador .s { font-size: 22px; color: var(--linha); }

/* ---------- 3. pelo mundo ---------- */
.mundo-cabeca { margin-bottom: 24px; }
.mundo-grade { flex: 0 0 755px; height: 755px; display: grid; grid-template-columns: 2fr 1fr; grid-column-gap: 28px; }
.mundo-grade.so-um { grid-template-columns: 1fr; }
.mundo-item { position: relative; height: 100%; }
.mundo-item .foto { height: 100%; }
.mundo-item .legenda { background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)); }
.mundo-item.grande .legenda { padding: 36px 40px; }
.mundo-item.grande .t { font-size: 54px; line-height: 1.05; }
.mundo-item.grande .s { font-size: 24px; margin-top: 10px; }
.mundo-item.pequeno .legenda { padding: 24px 28px; }
.mundo-item.pequeno .t { font-size: 36px; line-height: 1.08; }
.mundo-item.pequeno .s { font-size: 20px; }
.mundo-lado { display: flex; flex-direction: column; height: 100%; }
.mundo-lado > * { flex: 1 1 0; min-height: 0; }
.mundo-lado > * + * { margin-top: 28px; }

/* ---------- 4. eventos ---------- */
.evento-destaque { position: relative; flex: 1 1 auto; min-height: 0; }
.evento-destaque .foto { height: 100%; }
.evento-destaque .legenda { padding: 44px 48px; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)); }
.evento-destaque .t { font-size: 68px; line-height: 1.04; margin-top: 12px; }
.agenda { flex: 0 0 150px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column-gap: 28px; margin-top: 28px; }
.agenda-item { border: 1px solid var(--linha); padding: 24px 28px; box-sizing: border-box; display: flex; align-items: center; }
.agenda-data { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--acento); margin-right: 22px; }
.agenda-texto { font-size: 26px; font-weight: 700; line-height: 1.2; }

/* ---------- 5. quem está chegando ---------- */
.chegando-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column-gap: 32px; }
.novo .foto { height: 480px; margin-bottom: 16px; }
.novo-nome { font-family: var(--serif); font-size: 46px; line-height: 1.05; color: var(--preto); margin-bottom: 16px; }
.novo-tags { display: flex; flex-wrap: wrap; margin: -5px; }
.novo-tags div { background: var(--fundo-claro); padding: 8px 16px; font-size: 22px; margin: 5px; }
.novo-tags div.forte { background: var(--preto); color: #FFFFFF; }

/* ---------- 6. chamada com QR ---------- */
.tela.chamada.visivel { display: grid; grid-template-columns: 1fr 520px; grid-column-gap: 80px; align-items: center; background: var(--preto); padding: 0 80px; box-sizing: border-box; }
.chamada .rotulo { margin-bottom: 22px; }
.chamada-titulo { font-family: var(--serif); font-size: 120px; line-height: 1; color: #FFFFFF; margin-bottom: 22px; }
.chamada-texto { font-size: 32px; color: var(--linha); }
.qr { width: 520px; height: 520px; background: #FFFFFF; }
.qr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qr.vazia { background: #2A2A2A; position: relative; }
.qr.vazia::after { content: 'QR code'; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase; color: #666; }

/* ---------- sem conteúdo ---------- */
.aviso { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-family: var(--serif); font-size: 56px; color: var(--cinza-escuro); }