/* ==========================================================================
   CERTIFICACIÓN — ISO/IEC 27001:2022 de PRL
   El certificado completo a un lado y sus datos con la verificación al otro.
   ========================================================================== */

.cert { overflow: visible; }

/* ── Cabecera ─────────────────────────────────────────── */
.cert__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 48rem;
  margin: var(--space-10) auto var(--space-12);
  text-align: center;
}

.cert__seal { height: 3.5rem; margin-bottom: var(--space-6); }

.cert__kicker {
  color: var(--brand-primary);
  font-size: var(--text-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cert__title {
  margin-top: var(--space-3);
  color: var(--text-primary);
  font-size: var(--text-4xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
}

.cert__lead {
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* ── Certificado y datos ──────────────────────────────── */
.cert__layout {
  display: grid;
  gap: var(--space-12);
  max-width: 68rem;
  margin: 0 auto var(--space-16);
}

.cert__doc {
  display: block;
  width: min(100%, 26rem);
  margin-inline: auto;
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--glass-dark) 8%, transparent),
    0 6px 16px color-mix(in srgb, var(--glass-dark) 8%, transparent),
    0 24px 48px color-mix(in srgb, var(--glass-dark) 12%, transparent);
  transition: transform var(--duration-normal) var(--ease-spring);
}

.cert__doc:hover { transform: translateY(-4px); }
.cert__doc img { display: block; width: 100%; height: auto; border-radius: inherit; }

.cert__info { display: flex; flex-direction: column; gap: var(--space-12); }

.cert__facts { display: flex; flex-direction: column; gap: var(--space-6); margin: 0; }
.cert__fact { display: flex; flex-direction: column; gap: var(--space-1); }

.cert__fact dt {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cert__fact dd {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}

.cert__fact dd span { color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--fw-medium); }
.cert__fact .cert__scope { font-size: var(--text-base); font-weight: var(--fw-medium); line-height: var(--leading-relaxed); }

/* ── Verificación ─────────────────────────────────────── */
.cert__verify { display: flex; flex-direction: column; gap: var(--space-4); }

.cert__verify-title {
  color: var(--text-primary);
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
}

.cert__verify-text { color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); }

.cert__code { display: flex; flex-direction: column; gap: var(--space-1); }
.cert__code span { color: var(--text-tertiary); font-size: var(--text-xs); font-weight: var(--fw-semibold); }

.cert__code-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }

.cert__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--brand-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-smooth);
}

.cert__copy:hover { background: color-mix(in srgb, var(--brand-primary) 8%, transparent); }
.cert__copy:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.cert__code strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.04em;
}

.cert__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.cert__iaf { color: var(--text-tertiary); font-size: var(--text-xs); }

/* ── Escritorio: el certificado a la izquierda ────────── */
@media (min-width: 1024px) {
  .cert__header { margin-top: var(--space-12); }

  .cert__layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-16);
  }

  .cert__doc { position: sticky; top: var(--space-8); width: 100%; }
}