/* Páginas estáticas y de error (public/_page.php). Usa los tokens de app.css. */

.pg { display: flex; flex-direction: column; }
.pg-main { flex: 1; display: flex; flex-direction: column; }

/* ── Error / mantenimiento ─────────────────────────────────────────────── */
.err { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: 3rem 4rem; max-width: 36rem; }
.err-mark { width: 88px; height: 88px; filter: drop-shadow(0 12px 32px rgba(73, 63, 238, .35)); animation: err-float 6s ease-in-out infinite; }
.err-code { margin-top: 1.75rem; font: 600 .95rem/1 var(--ui); color: var(--aqua-text); }
.err h1 { margin-top: .9rem; font-size: clamp(2rem, 6vw, 3rem); }
.err-sub { margin-top: 1rem; color: var(--text-2); font-size: 1.05rem; max-width: 30rem; }
.err .btn-row { margin-top: 2rem; justify-content: center; }

@keyframes err-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .err-mark { animation: none; } }

/* ── Legales ───────────────────────────────────────────────────────────── */
.legal { max-width: 46rem; padding-block: 2.5rem 4rem; }
.legal h1 { margin-top: 0; font-size: clamp(2rem, 5vw, 2.75rem); }
.legal-date { margin-top: .6rem; color: var(--muted); font-size: .9rem; }
.legal-note { margin-top: 1.75rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-left: 3px solid var(--aqua); border-radius: var(--r-md); background: var(--card); box-shadow: var(--hi); color: var(--text-2); }
.legal-note strong { color: var(--text); }
.legal h2 { margin-top: 2.25rem; font-size: 1.2rem; }
.legal p, .legal li { color: var(--text-2); }
.legal h2 + p, .legal h2 + ul { margin-top: .7rem; }
.legal ul { padding-left: 1.2rem; display: grid; gap: .55rem; }
.legal li::marker { color: var(--aqua); }
.legal strong { color: var(--text); font-weight: 600; }
.legal code { font: 500 .9em var(--mono); color: var(--aqua-text); }
.legal-more { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* Sin JS el lockup queda como <img>: mismo alto que el que dibuja brand.js (≈ 38px de sobre). */
.pg .site-head .brand img { height: 30px; }

/* ── Confirmar email / recuperar contraseña (confirmar.php, recuperar.php) ── */
.recover { padding-block: 2.5rem 4rem; width: 100%; }
.recover form { margin-top: 0; }