/* Página de manutenção; cores e fontes vêm do contag-base.css. */
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }

.canto { position: fixed; top: 1rem; right: 1rem; z-index: 5; }

.palco {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.25rem 2rem;
}

/* Brilho dourado discreto atrás do conteúdo. */
.halo {
  position: absolute;
  top: 50%; left: 50%;
  width: min(90vw, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -55%);
  background: radial-gradient(closest-side, var(--cor-acento-suave), transparent 72%);
  opacity: 0.9;
  pointer-events: none;
  animation: respirar 7s ease-in-out infinite;
}

.palco > *:not(.halo) { position: relative; }

.logo { height: clamp(64px, 12vw, 96px); width: auto; margin-bottom: 2.25rem; animation: entrar .8s ease both; }

.selo {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .4rem .9rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 999px;
  background: var(--cor-superficie);
  margin: 0 0 1.5rem;
  animation: entrar .8s .1s ease both;
}
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cor-acento); animation: pulsar 1.8s ease-in-out infinite; }

.titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.12;
  margin: 0 0 1.25rem;
  animation: entrar .8s .2s ease both;
}

.texto {
  max-width: 34rem;
  margin: 0 0 2.25rem;
  color: var(--cor-texto-suave);
  font-size: 1.08rem;
  line-height: 1.65;
  animation: entrar .8s .3s ease both;
}

.trilho {
  width: min(320px, 70vw);
  height: 3px;
  border-radius: 3px;
  background: var(--cor-borda);
  overflow: hidden;
  margin-bottom: 2rem;
  animation: entrar .8s .4s ease both;
}
.trilho-barra {
  display: block; height: 100%; width: 38%;
  border-radius: 3px;
  background: var(--cor-acento);
  animation: correr 2.2s ease-in-out infinite;
}

.nota { max-width: 26rem; text-wrap: balance; color: var(--cor-texto-suave); font-size: .9rem; line-height: 1.6; margin: 0; animation: entrar .8s .5s ease both; }

.pe { text-align: center; padding: 1.5rem 1.25rem; font-size: .8rem; color: var(--cor-texto-suave); border-top: 1px solid var(--cor-borda); }

@keyframes entrar  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes correr  { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }
@keyframes pulsar  { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes respirar { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  .trilho-barra { width: 100%; opacity: .5; }
}