.hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 8px; }
.hero__img { width: 96px; height: 120px; }
.hero .m-title { margin: 0 0 4px; font-size: clamp(26px, 5vw, 38px); }
.hero__sum { margin: 0; font-weight: 700; color: var(--ink-soft); }
.hero__stars { display: flex; align-items: baseline; gap: 8px; padding: 10px 22px; border: 4px solid var(--navy); border-radius: 22px; background: var(--yellow); color: var(--navy); box-shadow: 0 6px 0 var(--navy); }
.hero__stars::before { content: ''; flex: none; width: 40px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.8l4.1 8.6 9.4 1.2-6.9 6.5 1.8 9.3L16 23.7l-8.4 4.7 1.8-9.3-6.9-6.5 9.4-1.2z' fill='%23fff' stroke='%230b2b58' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; align-self: center; }
.hero__starnum { font-size: 52px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.hero__starof { font-size: 18px; font-weight: 800; }
.warn { margin: 14px 0; padding: 12px 16px; border: 3px solid #b45309; border-radius: 14px; background: #fff3cd; font-weight: 700; }
.block { margin-top: 34px; }
.block h2 { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 4px solid var(--navy); font-size: clamp(22px, 3.5vw, 30px); color: var(--navy); }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.item { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 16px; background: #fff; border: 3px solid var(--navy); border-left: 12px solid var(--c, var(--blue)); border-radius: 14px; box-shadow: 0 4px 0 var(--navy); }
.item h3 { margin: 0; font-size: 18px; color: var(--navy); line-height: 1.2; }
.item p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.item .state { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 900; background: #eef2f7; color: #3d5873; }
.item .state.done { background: #c8f7d4; color: #0b3b1f; }
.item .state.mid { background: #fff0b8; color: #6b4a00; }
.item .go { margin-top: auto; align-self: flex-start; }
.medals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.medal { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px 14px; text-align: center; background: #fff; border: 3px solid var(--navy); border-radius: 16px; }
.medal__disc { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; border: 5px solid var(--navy); background: var(--c); color: #fff; font-size: 34px; box-shadow: inset 0 -6px 0 #00000026; }
.medal.off { background: #f3f4f6; }
.medal.off .medal__disc { background: #d4d9e1; color: #8793a3; border-color: #94a3b8; box-shadow: none; }
.medal strong { font-size: 15px; line-height: 1.2; color: var(--navy); }
.medal span.tag { font-size: 13px; font-weight: 800; color: #3d5873; }
.medal.on span.tag { color: #0b6b32; }
.cert-card { max-width: 760px; }
.cert-lead { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.cert-need { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.cert-need li { display: flex; gap: 10px; align-items: center; font-weight: 800; }
.cert-need .tick { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--navy); background: #fff; font-size: 16px; }
.cert-need li.ok .tick { background: #c8f7d4; }
.cert-form { display: grid; gap: 8px; justify-items: start; }
.cert-form label { font-weight: 900; color: var(--navy); }
.cert-form input { width: min(100%, 360px); min-height: 48px; padding: 8px 14px; border: 3px solid var(--navy); border-radius: 12px; font: inherit; font-size: 18px; }
.hint { margin: 0; font-size: 14px; color: var(--ink-soft); }
.reset p { margin: 0 0 12px; }
.confirm { display: grid; gap: 10px; max-width: 520px; padding: 16px; border: 3px solid var(--bad); border-radius: 14px; background: #fff0f5; }
.confirm__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ----- Certificado: só aparece na impressão ----- */
.certificado { display: none; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  html, body { background: #fff !important; }
  .m-wrap, .m-bar, .m-toast, .skip-link { display: none !important; }
  .certificado.is-on { display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .certificado__moldura { box-sizing: border-box; width: 100%; height: 188mm; border: 4mm double #0957d8; border-radius: 6mm; overflow: hidden; display: flex; flex-direction: column; background: #fff; color: #0b2b58; font-family: var(--font); }
  .certificado__topo { background: #0b2b58; padding: 6mm 10mm; display: flex; justify-content: center; border-bottom: 2.5mm solid #ffda62; }
  .certificado__topo img { height: 14mm; width: auto; }
  .certificado__corpo { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4mm 22mm; }
  .certificado__pre { margin: 0; font-size: 5mm; letter-spacing: 1.2mm; text-transform: uppercase; color: #0957d8; font-weight: 800; }
  .certificado__titulo { margin: 2mm 0 5mm; font-size: 12mm; line-height: 1.05; color: #0b2b58; }
  .certificado__linha { margin: 0; font-size: 5mm; }
  .certificado__nome { margin: 3mm 0 3mm; padding: 0 10mm 1mm; font-size: 11mm; font-weight: 900; color: #0957d8; border-bottom: .6mm solid #0b2b58; min-width: 90mm; }
  .certificado__feitos { list-style: none; margin: 4mm 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2mm 3mm; max-width: 220mm; }
  .certificado__feitos li { padding: 1.2mm 3.5mm; border: .5mm solid #0b2b58; border-radius: 999px; background: #fff3c4; font-size: 3.8mm; font-weight: 800; }
  .certificado__rodape { position: absolute; left: 12mm; right: 12mm; bottom: 4mm; display: flex; align-items: flex-end; justify-content: space-between; }
  .certificado__rodape img { height: 30mm; width: auto; }
  .certificado__rodape div { text-align: right; font-size: 4mm; font-weight: 800; }
  .certificado__rodape small { display: block; font-size: 3.2mm; font-weight: 600; color: #3d5873; }
}

/* ===== Acabamento ===== */
.medal__disc { background: var(--c); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 60%, #fff) 0%, var(--c) 62%); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .4), inset 0 -6px 0 #00000026, 0 4px 0 rgba(11, 43, 88, .35); }
.medal__disc .m-ico { font-size: 40px; }
.medal.on { background: linear-gradient(180deg, #fff 0%, #fff8dd 100%); }
.hero__stars { background: linear-gradient(180deg, #ffe58d 0%, #ffd24d 100%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .7), 0 6px 0 var(--navy), 0 16px 24px rgba(11, 43, 88, .22); }
.item { border-radius: 18px; }
.block h2 { border-bottom: 0; position: relative; padding-bottom: 14px; }
.block h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--navy) 0, var(--navy) 60px, #cfe3f6 60px); }