/* =========================================
   Página 05 — Certificado
   Archivo: css/21-pages-pagina05-certificado.css
   ========================================= */

.p05-cert{
  width: 100%;
}

.p05-cert-header-top{
  display: flex;
  gap: 16px;
  align-items: center;
}

.p05-cert-logo{
  width: 84px;
  height: 84px;
  border-radius: 12px;
  border: 1px solid #d7dee7;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex: 0 0 auto;
}

.p05-cert-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p05-cert-titlewrap{
  flex: 1 1 auto;
}

.p05-cert-title{
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-color);
  letter-spacing: 0.2px;
  margin-bottom: 8px;
}

.p05-cert-meta{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: #2e3135;
  font-size: 13px;
}

.p05-cert-meta-item{
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.p05-cert-meta-label{
  color: #6b7b8c;
  font-weight: 600;
}

.p05-cert-meta-value{
  font-weight: 700;
}

.p05-cert-meta-sep{
  width: 1px;
  height: 16px;
  background: #d7dee7;
}

.p05-cert-divider{
  height: 2px;
  background: rgba(13, 86, 140, 0.35);
  margin-top: 14px;
  border-radius: 2px;
}

/* Secciones (placeholders por ahora) */
.p05-sections{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.p05-section{
  border: 1px solid #d7dee7;
  border-radius: 14px;
  padding: 14px;
}

.p05-section-title{
  font-weight: 800;
  color: var(--primary-color);
  font-size: 14px;
  margin-bottom: 10px;
}

.p05-section--placeholder .p05-placeholder{
  margin-top: 4px;
}

/* fallback logo si falla el webp */
.p05-logo-fallback{
  display: flex;
  align-items: center;
  justify-content: center;
}

.p05-logo-fallback-text{
  font-size: 12px;
  color: #6b7b8c;
  font-weight: 700;
  display: none;
}

.p05-logo-fallback.p05-logo-fallback-text,
.p05-cert-logo.p05-logo-fallback .p05-logo-fallback-text{
  display: block;
}

