:root { --navy: #252652; --teal: #17a5bc; --teal-2: #0d6c8c; --muted: #5b6078; --line: #dde2ea; }
* { box-sizing: border-box; }
body { margin: 0; background: #f2f4ff; color: var(--navy); font-family: "Inter", "Segoe UI", Arial, sans-serif; padding: 24px 16px 48px;
  display: grid; justify-items: center; gap: 18px; }
.cert-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 14px; color: #1e8e5a; }
.cert-actions button { background: linear-gradient(135deg, #17a5bc, #0d6c8c); color: #fff; border: 0; border-radius: 8px; padding: 12px 24px;
  font: 600 15px inherit; font-family: inherit; cursor: pointer; }
/* 1.7.39: «Descarregar certificado (PDF)» = primary; «Imprimir / guardar PDF» = secondary */
.cert-actions .cert-dl { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: linear-gradient(135deg, #17a5bc, #0d6c8c); color: #fff;
  border-radius: 8px; padding: 12px 24px; font-weight: 600; font-size: 15px; text-decoration: none; }
.cert-actions .cert-dl:hover, .cert-actions .cert-dl:focus-visible { box-shadow: 0 8px 18px rgba(13, 108, 140, .25); }
.cert-actions .cert-dl:focus-visible, .cert-actions button:focus-visible { outline: 3px solid #252652; outline-offset: 2px; }
.cert-actions button.cert-print { background: #fff; color: var(--teal-2); border: 2px solid var(--teal-2); min-height: 44px; }
.cert { width: 100%; max-width: 980px; aspect-ratio: 1.414; background: #fff; border: 14px solid var(--navy); outline: 3px solid var(--teal);
  outline-offset: -26px; padding: 5% 7%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 6px; box-shadow: 0 10px 30px rgba(37, 38, 82, .12); }
.cert-seal { width: 120px; }
.cert-kicker { font-weight: 800; font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: var(--teal-2); margin: 6px 0 0; }
.cert-intro { color: var(--muted); margin: 6px 0 0; }
.cert-name { font-family: "Playfair Display", Georgia, serif; font-size: clamp(26px, 4vw, 46px); margin: 4px 0; }
.cert-course { font-size: clamp(16px, 2.2vw, 22px); margin: 4px 0; }
.cert-meta { font-size: 14px; color: var(--muted); margin: 4px 0; }
.cert-foot { display: flex; justify-content: space-between; gap: 20px; width: 100%; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.cert-foot div { display: grid; gap: 2px; flex: 1; }
.cert-foot span { font-size: 12px; color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.cert-verify { font-size: 12px; color: var(--muted); margin: 8px 0 0; word-break: break-all; }
.cert-missing { text-align: center; padding: 80px 16px; } .cert-missing img { width: 64px; }
@media (max-width: 700px) { .cert { aspect-ratio: auto; padding: 32px 20px; } .cert-foot { flex-direction: column; } }
@media print {
  body { background: #fff; padding: 0; } .cert-actions { display: none; }
  .cert { box-shadow: none; max-width: none; }
  @page { size: A4 landscape; margin: 8mm; }
}