/* Página pública do certificado (/certificado/<id>, src/social.js): uma folha clara, a medalha da cor do nível. */
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; background: #0d0f12; font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #141619; padding: 24px; }
.cert { --metal: #cd7f32; width: 100%; max-width: 760px; }
.cert.prata { --metal: #9aa4ad; } .cert.ouro { --metal: #d4a017; }
.cert-folha { background: #fbfaf7; border-radius: 22px; padding: 48px 36px; text-align: center; position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 12px var(--metal), 0 30px 80px rgba(0,0,0,.5); }
.cert-folha::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--c1) 14%, transparent), transparent); pointer-events: none; }
.cert-marca { font-weight: 800; font-size: 18px; letter-spacing: -.01em; } .cert-marca i { font-style: normal; color: #1296FC; }
.cert-medalha { width: 120px; height: 120px; margin: 26px auto 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--metal) 35%, #fff), var(--metal) 60%, color-mix(in srgb, var(--metal) 70%, #000)); box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 0 0 6px rgba(255,255,255,.35); }
.cert-rot { margin: 0; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #5b6670; }
.cert h1 { margin: 8px 0; font-size: clamp(30px, 6vw, 44px); letter-spacing: -.02em; }
.cert-txt { margin: 0 auto; max-width: 480px; color: #46525c; font-size: 18px; }
.cert-data { margin: 22px 0 0; font-size: 13px; color: #7a858f; }
.cert-cta { text-align: center; margin-top: 22px; } .cert-cta a { color: #8cc8ff; font-weight: 700; text-decoration: none; }