/* ============================================================
   somado · pagina.css — obrigado, 404 e páginas legais
   EDIÇÃO FUTURISTA CLARA
   ============================================================ */

/* --- Tela centrada (obrigado / 404) --- */
.page-center {
  position: relative;
  overflow: hidden;
  min-height: 62vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background:
    radial-gradient(800px 500px at 50% -10%, hsl(28 95% 60% / 0.14), transparent 60%),
    radial-gradient(600px 460px at 90% 110%, hsl(222 60% 55% / 0.08), transparent 60%),
    var(--color-bg-alt);
  background-size: 150% 150%, 150% 150%, 100% 100%;
  animation: mesh-drift 16s ease-in-out infinite alternate;
  padding-block: var(--sp-8);
}
@keyframes mesh-drift {
  0%   { background-position: 0% 0%, 100% 100%, 0 0; }
  100% { background-position: 60% 40%, 40% 60%, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .page-center { animation: none; } }
.page-center__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); z-index: 1; }
.page-center__icon {
  width: 76px; height: 76px; color: var(--color-success);
  filter: drop-shadow(0 0 18px hsl(150 65% 45% / 0.35));
}
.page-center__icon svg { width: 100%; height: 100%; }
.page-center__code {
  font-family: var(--font-display);
  font-size: 5rem; font-weight: var(--fw-bold); line-height: 1;
  background: var(--grad-orange);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-center h1 { font-size: var(--fs-xl); }
.page-center p { color: var(--color-text-muted); max-width: 52ch; }
.page-center .btn { margin-top: var(--sp-2); }
.page-center__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2); }
.page-center__back { margin-top: var(--sp-3); }
.page-center__back a { color: var(--orange-700); font-weight: var(--fw-semibold); }

/* --- Páginas legais (política / termos) --- */
.legal { padding-block: var(--sp-6) var(--sp-8); }
.legal h1 { font-size: var(--fs-xl); margin-bottom: 0.3rem; }
.legal__draft {
  background: #FFF6E5; border: 1px solid var(--color-warning); border-radius: var(--radius-sm);
  padding: 0.7rem 1rem; font-size: var(--fs-sm); color: #8A6400; margin-bottom: var(--sp-3);
}
.legal__update { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-4); font-family: var(--font-mono); }
.legal h2 { font-size: var(--fs-lg); margin-top: var(--sp-4); margin-bottom: var(--sp-1); }
.legal p { color: var(--color-text); margin-bottom: var(--sp-2); }
.legal ul { margin-bottom: var(--sp-2); }
.legal li { position: relative; padding-left: 1.4rem; margin-bottom: 0.5rem; color: var(--color-text); }
.legal li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-500); }
.legal a { color: var(--orange-700); font-weight: var(--fw-semibold); text-decoration: underline; }
.legal__back { margin-top: var(--sp-5); }